When showing an inline popup in a webpage (as opposed to a popup window) it is nice to grey out the background a little to highlight that the user should now interact with the popup rather than the webpage. This post shows how to do the necessary HTML and CSS to achieve this and tomorrow’s post will look at implementing the greyed out background with the jQuery Facebox plug-in.
A simple way to achieve this is to have an opaque/transparent div which takes up 100% of the window and has a z-index so it appears above everything except for the inline popup. The example presented here works in IE 6.0+, FF 1.0+, Opera 9.0+ (I haven’t tried it it in older versions), Chrome 2.0+, and Safari 3.2 + 4.0 on Windows (I haven’t tested it in older versions of Safari but it may work)
The CSS for doing this is as follows:
#opaque {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1000;
display: none;
background-color: black;
filter: alpha(opacity=30);
opacity: 0.3;
}
* html #opaque {
position: absolute;
}
The extra position: absolute at the end is to make it work in Internet Explorer 6.
The opacity of the div is set with "filter: …" for Internet Explorer and "opacity: …" for the other browsers. The lower the number the more opaque the layer. You can experiment with different background colors and opacity levels to make the "greyed out" webpage colored how you want it.
Then all you need in the webpage itself is the following empty div:
<div id="opaque"></div>
It can go anywhere in the web page and can also be added using Javascript.
Note that if you attempt to validate the CSS against a CSS validator that it will fail the "filter: …" part because it’s an Internet Explorer thing and not part of any standard, and it may warn about the "opacity: …" part because it’s only available officially from CSS v3.
See an example of this working here and tomorrow’s post will have a more comprehensive example using an actual popup window.