...

View Full Version : DIV Overlay Opacity Issue



brantn
12-21-2010, 06:57 AM
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?


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


#overlay {
background-color: #000000;
filter: alpha(opacity=60);
opacity: 0.6;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
visibility: hidden;
z-index: 50;
}


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";
}
}

Kor
12-21-2010, 12:42 PM
I don't get it. It works (at least in FF and IE). Which is the problem?

brantn
12-21-2010, 02:16 PM
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.

conware
12-21-2010, 09:34 PM
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 :p

brantn
12-21-2010, 10:02 PM
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?

conware
12-21-2010, 10:06 PM
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.


#login_button {
position: relative;
z-index: 150;
}
This works on localhost!

brantn
12-21-2010, 11:26 PM
Thank you I missed the position tag on that appreciate the extra set of eyes.

conware
12-21-2010, 11:29 PM
Thank you I missed the position tag on that appreciate the extra set of eyes.

Your welcome friend, Im happy it works for you! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum