Results 1 to 7 of 7

Thread: Overlay form using css on a webpage

  1. #1
    Join Date
    Jan 2006
    Posts
    118
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default Overlay form using css on a webpage

    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.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	webpage.jpg 
Views:	596 
Size:	79.3 KB 
ID:	5040  

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,011
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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/dynamici...dhtmlmodal.htm

    And another more modern one using HTML5 and CSS3: http://www.webdesignerdepot.com/2012...tml5-and-css3/

    And one using jQuery: http://www.queness.com/post/77/simpl...indow-tutorial

    Failing those, if you do a quick Google search on "modal window tutorial" you'll find lots more to choose from.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,011
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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...rn-web-design/

    There are links to several scripts/demos at the bottom of the page too.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    Jan 2006
    Posts
    118
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    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>&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>

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,011
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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.
    Last edited by Beverleyh; 04-19-2013 at 02:27 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #6
    Join Date
    Jan 2006
    Posts
    118
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Beverleyh View Post
    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.

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,011
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Overlay box help
    By hiro in forum JavaScript
    Replies: 3
    Last Post: 05-07-2012, 05:58 PM
  2. Pop Up Overlay
    By Wolfy87 in forum Submit a DHTML or CSS code
    Replies: 2
    Last Post: 08-07-2009, 11:56 AM
  3. Div Overlay
    By acctman in forum Looking for such a script or service
    Replies: 2
    Last Post: 02-28-2008, 01:00 PM
  4. After form submit alter webpage
    By redbrad0 in forum JavaScript
    Replies: 0
    Last Post: 12-19-2007, 09:48 PM
  5. Replies: 0
    Last Post: 12-18-2006, 01:37 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •