Log in

View Full Version : Overlay form using css on a webpage



Jim Weinberg
04-18-2013, 06:04 PM
I'd like to have a form displayed on a webpage when the page loads. The form should overlay the normal page with the background being somewhat washed out. If the viewer either submits the form or x's out of it, the page should display normally. I'm somewhat familiar with css, but not for something this complicated. I'm no artist, but have attached a jpg graphic to give you and idea of what I would like the page to look like when it loads. Can someone please help with the coding?

Thanks in advance.

Beverleyh
04-18-2013, 06:18 PM
Those are normally called a "modal window" and you can find lots of online scripts/demos to cherry-pick from (Obviously its easier when you know the terminology)

Here's an older script from the DD library: http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/dhtmlmodal.htm

And another more modern one using HTML5 and CSS3: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

And one using jQuery: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

Failing those, if you do a quick Google search on "modal window tutorial" you'll find lots more to choose from.

Beverleyh
04-18-2013, 06:31 PM
Here's a nice article that you might like, which covers best practises and usability considerations for modal windows (also, light boxes) http://www.smashingmagazine.com/2009/05/27/modal-windows-in-modern-web-design/

There are links to several scripts/demos at the bottom of the page too.

Jim Weinberg
04-19-2013, 02:09 PM
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.



<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>&nbsp;<br>
<table width="90%" background="Graphics/background.jpg" cellspacing=0 border=0>
<tr height=150px>
<td>&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="Business_Page.html"><font color="#FFFFFF" face="Arial">For Businesses</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="ContactUs_Page.html"><font color="#FFFFFF" face="Arial">Contact Us</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="ContactUs_Page.html"><font color="#FFFFFF" face="Arial">Contact Us</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>&nbsp;<p><font face="Arial" size=3>Sign Up To Receive This Free Information Now!
<p>&nbsp;<p>
<form id="addRegistrant" action="process_form.php" method="get">
Name: <input name="name"><p>&nbsp;<p>
Email: <input name="Email"><p>&nbsp;
<p style="text-align: right;">
<input name="submit" value="Get it Now!" type="submit">
<p>&nbsp;<p>
</form>
</div>
</div>
</body>

Beverleyh
04-19-2013, 02:21 PM
Which tutorial/script are you using?

Also please provide a link to your actual web page - what you've posted looks like its missing a lot of information.

Jim Weinberg
04-19-2013, 03:03 PM
Which tutorial/script are you using?

Also please provide a link to your actual web page - what you've posted looks like its missing a lot of information.

I'm not sure what you're asking me. The modal window is defined in the register div and is controlled by the overlay function. The only things that are missing are some of the graphics I use. Could you please let me know what you think is missing.

The page isn't on a server yet, but the page works perfectly on my computer. Except for the washing out of the back page.

Beverleyh
04-19-2013, 11:23 PM
You say you've looked at the scripts and have implemented one but the background overlay isn't working. Please post the link to the original demo/tutorial you've used so that we may use it for troubleshooting/comparison.

Also, please post a link to your web page so we can see it in full context. Upload it to the server, in a test page that can be deleted after use if you wish. Its easier for the person requesting help to post a link to an actual web page so others don't have to make one up on their behalf - one person doing the actual-work vs several people doing guess-work. I'm also on iPhone a lot so I can't easily make web pages myself, but I can look at existing ones.