www.webdeveloper.com
Results 1 to 4 of 4

Thread: Help with Modal Window CSS

Hybrid View

  1. #1
    Join Date
    May 2007
    Posts
    37

    Help with Modal Window CSS

    I'm trying to put a modal window on my webpage. I found a script on the net and it works just fine, except that when the window displays, the background page is not "washed out". I think it has to do with the opacity property, but I can't get it to work. Can someone please help with this. Here's the code:

    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>
    Thanks.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    There's no support in the code you posted that would wash out the page when the modal window is visible, and it would take major modification to add it. My advice would be to just include the sign-up form in a convenient location on the page and not worry about special effects until you learn more about HTML and CSS. Try again when you can make a page like this without using the <font> or <center> tags.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    May 2007
    Posts
    37
    rtrethewey.

    Thank you for your response and advice. Hopefully, someone else will reply with some assistance rather than a critique of my coding practices.

  4. #4
    Join Date
    May 2007
    Posts
    37

    Talking Resolved!

    Hi all.

    Well, it's been a couple of days and I haven't learned not to use <font> and <center> tags .... but I have learned how to make the background page wahsed out.

    So, for those who have the same problem and whose coding does not meet up to rtrethewey's standards, here is the solution:

    1. Create your main page (with the stuff you want washed out) and enclose the code in ID'd Divs. You can do this for one or more sections of your page code.

    2. Create your window (the stuff you want to show up) and enclose the code in an ID'd Div.

    3. Add the following script in the <head> section:
    Code:
    var useOpacity =
       (typeof document.createElement("div").style.opacity != 'undefined');
    var useFilter = !useOpacity
       && (typeof document.createElement("div").style.filter != 'undefined');
    
    function setOpacity(el, value) {
       if (typeof el == 'string')
          el = document.getElementById(el);
          value = Math.min(1, Math.max(value, 0));
          if (useOpacity)
                el.style.opacity = value;
          else if (useFilter)
                el.style.filter = "alpha(opacity=" + (value * 100) + ")";
    }
    That's all there is to it. The function can be called from any event handler (i.e. onLoad, onClick, etc.) and is passed the ID name and the opacity value (0-1) that you want to set.

    BTW, it works in virtually all browsers, EVEN IE.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles