I have Blogspot and a friend helped me make a makeshift lightbox so people can subscribe to my site. For example when they go to my site it pops up asking them if they want to subscribe. The script works its just some things in it are not working.He says that it wont close and that some body onload isnt working. I will post the script below so you can see if you can help me. Thanks. <body onLoad='document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block''> <style type='text/css'> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 300px; height: 250px; padding: 16px; border: 1px solid black; background-color: white; z-index:1002; overflow: auto; } </style> <div class='white_content' id='light'> <div class='separator' style='TEXT-ALIGN: center; CLEAR: both'> <a href='http://www.dshs.state.tx.us/chscontracts/newsletter/summer2009/images/pics/checklist.jpg' imageanchor='1' style='MARGIN-BOTTOM: 1em; FLOAT: left; CLEAR: left; MARGIN-RIGHT: 1em'><img border='0' height='200' src='http://www.dshs.state.tx.us/chscontracts/newsletter/summer2009/images/pics/checklist.jpg' width='115'/></a></div> "Join our newsletter and get a <b><span style='color:red;'>FREE</span> </b>copy of the <b>Adrenaline Gaming Checklist</b>" <b> Plus get daily updates from Game Adrenaline sent to your email!</b> <form action='http://feedmailpro.com/subscriptions' method='post'> <input name='subscriber[feed_id]' type='hidden' value='708'/> <input class='textf' gtbfieldid='6' name='subscriber[email]' onblur='if (this.value == '') {this.value = 'Enter your email address';}' onfocus='if (this.value == 'Enter your email address') {this.value = '';}'/>        <input class='subscribesubmit' src='http://i263.photobucket.com/albums/ii150/mohamedrias/subscribesubmit.png' type='image'/></form> <div style='TEXT-ALIGN: center'> <span style='font-size:x-small;'><i><span style='FONT-WEIGHT: bold'>We respect your privacy and we will never spam you.</span></i></span></div> <div style='TEXT-ALIGN: center'/> <a href='javascript:void(0)' onclick='document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none''>Close</a></div> <div class='black_overlay' id='fade'/> Code (markup):
I think you have copied the code from somewhere through firebug Try this one. there was two div tag mismatched... firebug copy wrong closing div uf div is empty... <body onLoad='document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block''> <style type='text/css'> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 300px; height: 250px; padding: 16px; border: 1px solid black; background-color: white; z-index:1002; overflow: auto; } </style> <div class='white_content' id='light'> <div class='separator' style='TEXT-ALIGN: center; CLEAR: both'> <a href='http://www.dshs.state.tx.us/chscontracts/newsletter/summer2009/images/pics/checklist.jpg' imageanchor='1' style='MARGIN-BOTTOM: 1em; FLOAT: left; CLEAR: left; MARGIN-RIGHT: 1em'><img border='0' height='200' src='http://www.dshs.state.tx.us/chscontracts/newsletter/summer2009/images/pics/checklist.jpg' width='115'/></a></div> "Join our newsletter and get a <b><span style='color:red;'>FREE</span> </b>copy of the <b>Adrenaline Gaming Checklist</b>" <b> Plus get daily updates from Game Adrenaline sent to your email!</b> <form action='http://feedmailpro.com/subscriptions' method='post'> <input name='subscriber[feed_id]' type='hidden' value='708'/> <input class='textf' gtbfieldid='6' name='subscriber[email]' onblur='if (this.value == '') {this.value = 'Enter your email address';}' onfocus='if (this.value == 'Enter your email address') {this.value = '';}'/>        <input class='subscribesubmit' src='http://i263.photobucket.com/albums/ii150/mohamedrias/subscribesubmit.png' type='image'/></form> <div style='TEXT-ALIGN: center'> <span style='font-size:x-small;'><i><span style='FONT-WEIGHT: bold'>We respect your privacy and we will never spam you.</span></i></span></div> <div style='TEXT-ALIGN: center'></div> <a href='javascript:void(0)' onclick='document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none''>Close</a></div> <div class='black_overlay' id='fade'></div> PHP:
Try this one .. Tested on FF & IE <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script type="text/javascript"> function displayDiv() { document.getElementById('light').style.display= 'block'; document.getElementById('fade').style.display= 'block'; } function hideDiv() { document.getElementById('light').style.display= 'none'; document.getElementById('fade').style.display= 'none'; } </script> </head> <body onLoad='displayDiv()'> <style type='text/css'> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 300px; height: 250px; padding: 16px; border: 1px solid black; background-color: white; z-index:1002; overflow: auto; } </style> <div class='white_content' id='light'> <div class='separator' style='TEXT-ALIGN: center; CLEAR: both'> <a href='http://www.dshs.state.tx.us/chscontracts/newsletter/summer2009/images/pics/checklist.jpg' imageanchor='1' style='MARGIN-BOTTOM: 1em; FLOAT: left; CLEAR: left; MARGIN-RIGHT: 1em'><img border='0' height='200' src='http://www.dshs.state.tx.us/chscontracts/newsletter/summer2009/images/pics/checklist.jpg' width='115'/></a></div> "Join our newsletter and get a <b><span style='color:red;'>FREE</span> </b>copy of the <b>Adrenaline Gaming Checklist</b>" <b> Plus get daily updates from Game Adrenaline sent to your email!</b> <form action='http://feedmailpro.com/subscriptions' method='post'> <input name='subscriber[feed_id]' type='hidden' value='708'/> <input class='textf' gtbfieldid='6' name='subscriber[email]' onblur='if (this.value == '') {this.value = 'Enter your email address';}' onfocus='if (this.value == 'Enter your email address') {this.value = '';}'/>         <input class='subscribesubmit' src='http://i263.photobucket.com/albums/ii150/mohamedrias/subscribesubmit.png' type='image'/> </form> <div style='TEXT-ALIGN: center'> <span style='font-size:x-small;'><i><span style='FONT-WEIGHT: bold'>We respect your privacy and we will never spam you.</span></i></span></div> <div style='TEXT-ALIGN: center'></div> <a href='javascript:void(0)' onclick='hideDiv()'>Close</a></div> <div class='black_overlay' id='fade'> </div> </html> PHP: