Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV Overlay Opacity Issue

    I am working on a popout that dims the underlying page I have successfully got the pop out and page to dim however the signin link also dims. I would like the sign in link and pop out to be 100 percent visible while everything else is dimmed. Live view of this is at http://www.nbudget.org

    What am I missing here?

    Code:
    <!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=utf-8" />
    <title>Welcome to Nbudget.org! A work in progress!</title>
    <link href="styles/nbudget.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript" src="scripts/login_popout.js"></script>
    </head>
    <body>
    <div id="body_wrapper">
    	<div id="header_wrapper">
    		<div id="header_spacer"></div>
    	  <div id="header_login">
    		<div id="login_wrapper">
    				<div id="login_button"><a href="#" onClick="LoginPopout()"><img src="images/signin.png" width="82" height="19" border="0" /></a></div>
    		  <div id="login_popout"><?php include("login_popout.php"); ?></div>
                </div>
            </div>    
    		<div id="header_navigation"></div>
    	</div>
    </div>
    <div id="overlay">&nbsp;</div>
    </body>
    </html>
    Code:
    #overlay {
    	background-color: #000000;
    	filter: alpha(opacity=60);
    	opacity: 0.6;
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	width: 100%;
    	visibility: hidden;
    	z-index: 50;
    }
    Code:
    function LoginPopout() 
    {
    var popout = document.getElementById("login_popout");
    var overlay = document.getElementById("overlay");
    var windowheight = document.body.parentNode.scrollHeight + 'px';
    
    if(popout.style.visibility=='visible')
    	{
    		popout.style.visibility="hidden";		
    		overlay.style.visibility="hidden";
    	}
    	else
    	{
            popout.style.visibility="visible";
    		overlay.style.height=windowheight;
    		overlay.style.visibility="visible";
    	}
    }

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I don't get it. It works (at least in FF and IE). Which is the problem?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I want it to also leave the sign in button visible with the popout div. That way I can close the popout with just clicking the button again.

  • #4
    Regular Coder
    Join Date
    Mar 2010
    Posts
    199
    Thanks
    78
    Thanked 5 Times in 5 Posts
    How about adding a z-index to your login_button and set it 51 then it should not get darker because overlay has a z-index of 50.
    Well its just a idea not sure if that would work

  • #5
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have tried that already with no luck z-index of the button div is 100 and the overlay is 50 the popout itself is 150. Any other ideas?

  • #6
    Regular Coder
    Join Date
    Mar 2010
    Posts
    199
    Thanks
    78
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by brantn View Post
    I have tried that already with no luck z-index of the button div is 100 and the overlay is 50 the popout itself is 150. Any other ideas?
    Found your solution.

    Code:
    #login_button {
    	position: relative;
    	z-index: 150;
    }
    This works on localhost!
    Last edited by conware; 12-21-2010 at 09:10 PM.

  • #7
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you I missed the position tag on that appreciate the extra set of eyes.

  • #8
    Regular Coder
    Join Date
    Mar 2010
    Posts
    199
    Thanks
    78
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by brantn View Post
    Thank you I missed the position tag on that appreciate the extra set of eyes.
    Your welcome friend, Im happy it works for you!


  •  

    Posting Permissions

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