Today I’ll show you how to make that digg popup effect when you want to watch a video. If you don’t know what I’m talking about, you’ll find out soon enough.
First, we’ll set up the CSS. The effect that we want uses a transparent div to cover the rest of the page. You can use the method that I suggested in my previous post.
I will be using the “transparency.png” from my previous post for IE7 browsers again:
The CSS:
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: center;
background-color: #ffffff;
padding:0px;
overflow:hidden;
margin:0px;
}
#fixed
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
}
#container
{
position:relative;
width:800px;
margin-left:auto;
margin-right:auto;
padding:0px;
text-align: left;
z-index:3;
}
#opacityIE7
{
background: url(img/transparency.png) 0 0;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
display:none;
padding-top:300px;
z-index:20;
}
#opacity
{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);
background:#999999;
display:none;
padding-top:300px;
z-index:20;
}
*html #opacity
{
position:absolute;
}
#pop
{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
display:none;
padding-top:200px;
z-index:21;
}
*html #pop
{
position:absolute;
}
#popup
{
position:relative;
margin:auto;
width:250px;
padding:30px 10px 10px 10px;
background:#fff;
border:1px solid #000;
}
#middle
{
position:relative;
top:400px;
width:100px;
margin:0 auto 0 auto;
}
Explanation:
I’ll explain from the top.
There is a problem with IE involving the “position:fixed” property. It doesn’t support it. Apparently IE7 beta 2 and upwards supports it though. “position:fixed” is somewhat similar to “position:absolute,” but “position:fixed” is absoluted relative to the browser window, not the actual web page document. I’ll save the tutorial for that problem for later, because that could get hairy.
The “fixed” div solves this position:fixed problem. It basically acts as the <body></body> tags so treat it that way.
The “container” div is the usual container div, so just put all your content in here.
All of the “opacity” divs are set to span the entire web page to basically block out everything under it. Pay special not to the z-index of these divs. I numbered it 20 just in case you have a lot of layered divs.
The “pop” div is where you put the contents of the popup in.
The “popup” div is just a div I put there to indicate a place you might want to put your text, images, videos in.
The “middle” div is just a div in the middle that will have the link to make the popup appear.
For the Javascript we have:
function opacity()
{
element = document.getElementById("pop");
opac = document.getElementById("opacity");
if(element.style.display == 'none' || element.style.display == '')
{
element.style.display = 'block';
opac.style.display = 'block';
}
else
{
element.style.display = 'none';
opac.style.display = 'none';
}
}
function opacityIE7()
{
element = document.getElementById("pop");
opac = document.getElementById("opacityIE7");
if(element.style.display == 'none' || element.style.display == '')
{
element.style.display = 'block';
opac.style.display = 'block';
}
else
{
element.style.display = 'none';
opac.style.display = 'none';
}
}
Once again, because IE7 uses the “transparent.png” instead of a colored div, we have to have two cases for this Javascript function.
The jist of these functions is to set the display properties of the divs named “pop” and “opacity”/”opacityIE7″ to block, or if they’re already set to block, then set it back to none.
Finally the HTML:
*note* I chose to use PHP for this instead of doing the IE conditionals,
e.g. <!–[if IE 7]><![endif]–>, because I feel its more efficient this way.
<?php
$browser = $_SERVER['HTTP_USER_AGENT'];
$ie7 = "";
if(strstr($browser,"MSIE 7.0"))
{
$ie7 = "IE7";
}
?>
<div id="fixed">
<div id="container">
<div id="middle"><a href="javascript:opacity<?php echo $ie7 ?>()">Click Here</a></div>
</div>
</div>
<div id='opacity'>
</div>
<div id="pop">
<div id="popup">
<a href="javascript:opacity<?php echo $ie7 ?>()">Close</a>
</div>
</div>
Explanation:
What $_SERVER[’HTTP_USER_AGENT’] does is retrieve the web browser’s information. Then, it’s passed through the if conditional. This basically checks to see if the browser is IE7.
The variable $ie7 is just a string variable that is set to “IE7″ if the browser is in face IE7. This variable will just be appended to all the calls to the “opacity” divs and Javascript functions. In other words, “opacity” will become “opacityIE7.” If the browser isn’t IE7, then $ie7 will stay set to nothing; and thus, nothing will be appended.
Notice that the “opacity” and “pop” divs are outside the “fixed” div. That is essential to solving the fixed problem in IE.
The “pop” div has to be a separate div from “opacity” because if there were contents inside the “opacity” div that were relatively positioned, then the height and widths will grow causing the scrollbar to be enabled. This will look weird if you can scroll while this popup is open.
Finally, the moment you’ve all been waiting for. The final result. Enjoy!
RSS feed for comments on this post
