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:
<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:
<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:
<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:
#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?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return displaybox();'>Send this to a Friend</a>
<script>
function displaybox(){
var thediv=document.getElementById('displaybox'),txt="";
if(thediv.style.display == "none"){
txt = '<link rel="stylesheet" href="http://ivegotkids.com/wp-content/themes/thepink/astrology.css" type="text/css" media="screen" />';
txt += '<div class="send2friend">';
txt += '<img src="http://ivegotkids.com/wp-content/themes/thepink/images/logo.png"><br /><br />';
txt += '<span class="formtitle">Send "<span class="pagetitle">I\\'ve Got Kids!: Aries"</span> to a friend by e-mail.</span>';
txt += '<br />Fill out the form below and click on submit to send this to your friend.<br /><br />';
txt += '<form method="post">';
txt += 'Your Name: <input type="text" name="yourname" length="40"/> <br />';
txt += 'Your Email: <input type="text" name="youremail" length="50"/> <br /><br>';
txt += 'Friend\\'s Name: <input type"text" name="friendname" length="40" /><br>';
txt += 'Friend\\'s E-Mail: <input type="text" name="email" length="50" /><br /><br />';
txt += 'Include a message from you:<br />';
txt += '<textarea rows="4" cols="50" name="message"> </textarea><br /><br />';
txt += '<input type="submit" value="Send To Friend">';
txt += '</form>';
txt += '</div>';
txt += '<br><br><a href="#" onclick="return displaybox();" >Close Form</a>';
thediv.style.display = "";
}
else{
thediv.style.display = "none";
}
thediv.innerHTML = txt;
return false;
}
</script>
</body>
</html>
Hi Vic,
Thank you so much for a great response. However, I realised I made a mistake and as it turned out asked the completely wrong question.
Your example worked perfectly - except I forgot to tell you that my “inner.html” is actually a web-page, not a single piece of html. The problem being, the said webpage is programmed in PHP. So what I need the overlay to display is a separate page rather than a piece of HTML.
I have tried to fix this myself, but it’s not giving me the desired results. This is what I have come up with so far (forgive me, javascript really isn’t my specialty):
<script>
function displaybox(){
var thediv=document.getElementById('displaybox'),txt="";
if(thediv.style.display == "none"){
txt = window.location="http://ivegotkids.com/wp-content/themes/thepink/send2friend-aries.php";
txt += '<br><br><a href="#" onclick="return displaybox();" >Close Form</a> ';
thediv.style.display = "";
}
else{
thediv.style.display = "none";
}
thediv.innerHTML = txt;
return false;
}
</script>
Unfortunately, when I click the link - instead of an overlay it redirects me to the given location.
Do you know how to do this?
Update:
I managed to do what I wanted to do using an IFRAME but I know this is outdated so I’d still like to know if there is a better, validated way to do this:
This is what I have so far:
<script>
function displaybox(){
var thediv=document.getElementById('displaybox'),txt="";
if(thediv.style.display == "none"){
txt = '<iframe frameborder="0" scrolling="no" width="700px" height="700px" src="http://ivegotkids.com/wp-content/themes/thepink/send2friend-aries.php"></iframe>';
txt += '<br><br><a href="#" onclick="return displaybox();" >Close Form</a> ';
thediv.style.display = "";
}
else{
thediv.style.display = "none";
}
thediv.innerHTML = txt;
return false;
}
</script>
As I said, it does what I want it to do but I know this wouldn’t be validated because it uses an IFRAME. Is there a better way?