Bererlyh.
Thank you so much for the leads. I've looked at them and others and finally found something that lets the page display the way I want it to.
I only have one problem left. When the modal window displays, the background page is not "washed out". I believe it has something to do with the opacity property, but I can't get it to work right. I can get the modal window to "wash out", but not the background page. Any thoughts on how to do that?
My code is below.
Thanks in advance.
Code:
<style>
body {
height:100%;
margin:0;
padding:0;
}
div.register {
margin-left: 30%;
background-color: #FFCF31;
width: 450px;
visibility:visible;
position:absolute;
top:227;
left:0;
z-index: 1000;
}
div.register p {
font-size: .8em;
margin: 0px 0px 0px 0px;
}
div#signupForm {
margin: 0px 20px 0px 20px;
font-family: Arial, sans-serif;
font-size: .8em;
}
a.formLink {
font-family: Arial, sans-serif;
font-size: .9em;
}
</style>
<style>
ul
{
list-style-type:disc;
padding:0px;
margin:10px;
position:relative;
left:100px;
}
</style>
<script>
function overlay() {
el = document.getElementById("register");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
<body bgcolor="#848997" onload="javascript:overlay()">
<center><p> <br>
<table width="90%" background="Graphics/background.jpg" cellspacing=0 border=0>
<tr height=150px>
<td> <img src="Graphics/Logo1a.gif"> <img src="Graphics/Logo2a.gif"></td><td align="right" valign="top"><a href="Consumer_Page.html"><font color="#FFFFFF" face="Arial">For Consumers</font></a> <a href="Business_Page.html"><font color="#FFFFFF" face="Arial">For Businesses</font></a> <a href="ContactUs_Page.html"><font color="#FFFFFF" face="Arial">Contact Us</font></a> </font></td>
</tr>
<tr>
<td colspan=2><table bgcolor="#ffffff" width="100%" cellspacing=15 border=0>
<tr>
<td><font face="Arial" size=5 color="#3D69BF"> Connect with a Local Business</font></td>
</tr>
<tr>
<td><font face="Arial" size=4>Welcome to Your Local Loop we provide homeowners with Local companies that can take care of most of their needs, whether it be home repairs, cleaning your house or yard, or replacing your roof. We feature these companies in our magazine that we mail to most homeowners.</font></td>
</tr>
<tr>
<td>
<p>
<font face="Arial" size=4>
<ul>
<li>Most home owners have at least 156 local business with in a 3 mile radius of their home!</li>
<p></p>
<li>Chances are you’ve shopped, attended church or have met some of thesebusiness owners <br>or employees at school or local functions!</li>
<p></p>
<li>It can save you $$$ by staying local, plus time!</li>
<p></p>
</ul></td>
</tr>
<tr>
<td align="center"><table bgcolor="#A1BDEF" width="90%" cellspacing=15 border=0>
<tr>
<td align="center"><font face="Arial" size=5 color="#3D69BF">Watch for<img src="Graphics/Logo3.gif" align="top">magazine soon in your mail box.</font></td>
</tr>
<tr>
<td align="center"><font face="Arial" size=4 color="#3D69BF">Make sure your on our list.</font></td>
</tr>
<tr>
<td align="center"><a href="Mail_List.html"><img src="Graphics/ClickHere.jpg" border=0></a></td>
</tr>
</table>
</td>
</tr>
<tr height=15px></tr>
</table>
</td>
</tr>
<tr>
<td colspan=2 align="left" valign="middle"><a href="AboutUs_Page.html"><font color="#FFFFFF" face="Arial">About Us</font></a> <a href="ContactUs_Page.html"><font color="#FFFFFF" face="Arial">Contact Us</font></a> </font></td>
</tr>
<tr height=50px></tr>
</table>
<p>
<center>
<font=-1>Copyright 2013 Your Local Loop; all rights reserved.</font>
<div class="register" id="register">
<center>
<div id="signupForm">
<p style="text-align: right;"><a class="formLink" title="Sign up form" href="javascript:overlay()"><font face="Arial" size=3>close<font></a>
<p><font face="Arial" size=5>3 reasons you should use<p>a local business!</font><p> <p><font face="Arial" size=3>Sign Up To Receive This Free Information Now!
<p> <p>
<form id="addRegistrant" action="process_form.php" method="get">
Name: <input name="name"><p> <p>
Email: <input name="Email"><p>
<p style="text-align: right;">
<input name="submit" value="Get it Now!" type="submit">
<p> <p>
</form>
</div>
</div>
</body>
Overlay form using css on a webpage
Reply With Quote
Originally Posted by Beverleyh
Bookmarks