Hi there,

I require a little help with programming an Overlay for a web page. I have followed a tutorial that I found by searching the various search engines but it doesn't seem to be working and I can't figure out where it's gone wrong.

I realise there are many different aspects to an Overlay but I'm posting here in the hope the problem is with the Javascript because I'm pretty sure the CSS is fine.

First - I have an Empty DIV element at the top of my page called "displaybox" like this:

Code:
<div id="displaybox" style="display: none;"></div>
Then I have a link on my page called "Send to a Friend" which activates a javascript function called "displaybox" like this:

Code:
<ul class="link"><li class="links"> <a href='#' onclick='return displaybox();'>Send this to a Friend</a> </li></ul>
Then at the bottom of the page, I have my javascript for the function "displaybox" which should remove the "display:none" element from the div and fill it with innerHTML like this:

Code:
<script>
function displaybox(){
	var thediv=document.getElementById('displaybox');
	if(thediv.style.display == "none"){
		thediv.style.display = "";
		thediv.innerHTML = "<link rel="stylesheet" href="http://ivegotkids.com/wp-content/themes/thepink/astrology.css" type="text/css" media="screen" /><div class="send2friend">
<img src="http://ivegotkids.com/wp-content/themes/thepink/images/logo.png">
<br /><br />
<span class="formtitle">Send "<span class="pagetitle">I've Got Kids!: Aries"</span> to a friend by e-mail.</span>
<br />
Fill out the form below and click on submit to send this to your friend.
<br /><br />
<form method="post">
Your Name: <input type="text" name="yourname" length="40"/> <br />
Your Email: <input type="text" name="youremail" length="50"/> <br /><br>
Friend's Name: <input type"text" name="friendname" length="40" /><br>
Friend's E-Mail: <input type="text" name="email" length="50" /><br /><br />
Include a message from you:<br />
<textarea rows="4" cols="50" name="message"> </textarea><br /><br />
<input type="submit" value="Send To Friend">
</form>
</div>
<br><br><a href='#' onclick='return displaybox();'>Close Form</a>";
	}else{
		thediv.style.display = "none";
		thediv.innerHTML = '';
	}
	return false;
}
<script>
Finally - My CSS for the #displaybox div is in my style sheet as this:

Code:
#displaybox {
	z-index: 10000;
	filter: alpha(opacity=50); /*older IE*/
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
	-moz-opacity: .50; /*older Mozilla*/
	-khtml-opacity: 0.5;   /*older Safari*/
	opacity: 0.5;   /*supported by current Mozilla, Safari, and Opera*/
	background-color:#000000;
	position:fixed; top:0px; left:0px; width:100%; height:100%; text-align:center; vertical-align:middle;
}
You can see the page yourself, which I'm testing at: http://ivegotkids.com/aries-test-page
As you can see - when you click on the "Send this to a Friend" link, nothing happens!

Any ideas?