How to make an overlay using only one div
created March 11, 2009 at 10:56 pm
One thing I have realized in my journey across the internets is that there is no simple, clear way to make an overlay using only one div (at least that I could find). If you have no clue what I am talking about click on the "add comment" link, and you will see. The page dims, the curtain goes up and the audience applauds.
Just a small disclaimer: The CSS that I am about to show you will work just fine in all browsers except for Internet Explorer 6 (what a shock!). I will show you the necessary Javascript (using jQuery) needed to fix this.
The first step is to simply add one div inside the body tag like so:
The next step is to add the following to your stylesheet:
To go through this step by step:
Now you may be thinking, "That's it? We are done? That was so simple!". If only the world were that simple. We still have to take Internet Explorer 6 into account.
I'm pretty sure if Internet Explorer 6 were a child in elementary school it would be the last kid picked in gym class. Hmmm ... Actually it might be the kid that skipped gym class all together and was in the nurse's office being treated for its terrible diseases.
Anyway, the first thing we have to do is create a stylesheet specifically for IE6. To do that we use a CSS conditional statement in our html like so:
Now inside of overlay_ie6.css we add the following styles:
This is because IE6 does not like position: fixed or the Microsoft filter used for IE7. Therefore we must do this so that it will begin to play nicely. The final step is adding a few lines of Javascript only for IE6. I am using jQuery cause it is my framework of choice and is very speedy and light weight. This is definitely a hack, and I do not really like hacks so if anyone has come across this problem before and has a more elegant solution I urge you to leave me a comment.
This code is fairly straight forward, but basically what it is doing is figuring out a pixel width and pixel height to set the overlay to for IE6. IE6 does not like using percentages in this case. First we get the height and width of the current window. Then we get the height of the window with content (assuming all of the horizontal content fits within the width of the window - no side scrolling). Whichever height is greater is the height we use at the end to explicitly set the height and width of the #overlay div.
That's all for now!
Just a small disclaimer: The CSS that I am about to show you will work just fine in all browsers except for Internet Explorer 6 (what a shock!). I will show you the necessary Javascript (using jQuery) needed to fix this.
The first step is to simply add one div inside the body tag like so:
<body>
<div id="overlay"><!-- this is the overlay :) --></div>
</body>
<div id="overlay"><!-- this is the overlay :) --></div>
</body>
The next step is to add the following to your stylesheet:
#overlay {
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #333;
-moz-opacity: 0.5;
opacity: .50;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #333;
-moz-opacity: 0.5;
opacity: .50;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
To go through this step by step:
- display: none
- This simply means don't show this div. The reason is obvious since we don't want our entire page to load with a colour on top of it. One thing to note is that we will have to use javascript to set the display here to block or something other than none when we want this to show up on the page.
- position: fixed
- This means that the top left point of the div is fixed at point (0,0) or whatever point you specify. This means intelligent browsers can scale the width and height to cover the whole window
- z-index: 1000
- You can think of the z-index as if you have many sheets of paper on top of another. Each layer is one above the previous. Unfortunately it doesn't always work as advertised. Setting this at 1000 just ensures that it is above all content on the page although it can really be any number greater than zero.
- -moz-opacity: 0.5
- This is a special css property that is specific to Mozilla Firefox. Like any of the other opacity settings: play around with it until it looks how you want it to.
- opacity: .50
- This is the default opacity property in css. Safari uses this.
- filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50)
- This whole nonsense is specifically for Internet Explorer 7. As you can see Microsoft so slyly inserted their name here.
Now you may be thinking, "That's it? We are done? That was so simple!". If only the world were that simple. We still have to take Internet Explorer 6 into account.
I'm pretty sure if Internet Explorer 6 were a child in elementary school it would be the last kid picked in gym class. Hmmm ... Actually it might be the kid that skipped gym class all together and was in the nurse's office being treated for its terrible diseases.
Anyway, the first thing we have to do is create a stylesheet specifically for IE6. To do that we use a CSS conditional statement in our html like so:
<!--[if IE 6]>
<link href="overlay_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="overlay_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
Now inside of overlay_ie6.css we add the following styles:
#overlay {
position: absolute;
filter: alpha(opacity=50);
}
position: absolute;
filter: alpha(opacity=50);
}
This is because IE6 does not like position: fixed or the Microsoft filter used for IE7. Therefore we must do this so that it will begin to play nicely. The final step is adding a few lines of Javascript only for IE6. I am using jQuery cause it is my framework of choice and is very speedy and light weight. This is definitely a hack, and I do not really like hacks so if anyone has come across this problem before and has a more elegant solution I urge you to leave me a comment.
if (jQuery.browser.msie && jQuery.browser.version == 6) {
var width = $(window).width();
var height = $(window).height();
var pageHeight = document.body.clientHeight;
if (pageHeight > height) {
height = pageHeight;
}
$("#overlay").css({width: width, height: height});
}
var width = $(window).width();
var height = $(window).height();
var pageHeight = document.body.clientHeight;
if (pageHeight > height) {
height = pageHeight;
}
$("#overlay").css({width: width, height: height});
}
This code is fairly straight forward, but basically what it is doing is figuring out a pixel width and pixel height to set the overlay to for IE6. IE6 does not like using percentages in this case. First we get the height and width of the current window. Then we get the height of the window with content (assuming all of the horizontal content fits within the width of the window - no side scrolling). Whichever height is greater is the height we use at the end to explicitly set the height and width of the #overlay div.
That's all for now!
5 comments
are you sure you want to delete this comment?
I did it quite differently using a small png.
If you'd like to see the way I did it, just send me a mail ;-)
Thanks
are you sure you want to delete this comment?
Does the script for IE6 go in the IE6.css file or in the HTML of the page?
are you sure you want to delete this comment?
Thanks again for this it's been really useful. I've used it to create an overlay banner on a site that I'm archiving - and it's even working on IE5.5 now!
are you sure you want to delete this comment?
p.s. I don't think the JavaScript should be in the ie6.css file, just bang it into a JavaScript file
are you sure you want to delete this comment?