An alternative to DIV overlays
Published Tuesday, February 10, 2009 in CSS, Javascript, jQuery
When displaying a modal dialog it's pretty common to dim the rest of the page to focus the user's attention on the dialog in question.
A common way to solve the dimming is to overlay the entire page with a 100% wide, 100% high div-element with a little opacity and then display the dialog on top of the overlay.
Recently at work I tried a different aproach for solving the dim and it worked out quite nicely.
Instead of overlaying a semi-transparent div on top of the page I instead made the actual page semi-transparent and simply changed body's background to something a little darker.
The semi-transparent #wrapper and darker body are both styled under body.dimmed so whenever I need to dim out the page I simply give body a class of "dimmed".
The benefit here is that you don't need to play around with JS to create a div that always covers the entire viewport in every browser but instead you simply toggle a class-name on body.
Benefit number 2 is that since everything on your page (including the dialog) are contained within the body-element they too can be styled differently when body is dimmed and when it's not.
So the simple CSS turns out something like this:
/* Normal styling */
body {
background: #369;
}
#wrapper {
background: #fff;
width: 960px;
margin: 0 auto;
}
div.dialog {
background: #fff;
display: none;
position: absolute;
left: 50%;
top: 15%;
width: 400px;
margin: 0 0 0 -200px;
}
/* Dimmed styling */
body.dimmed {
background: #111;
}
body.dimmed #wrapper {
opacity: .1;
}
body.dimmed div.dialog {
display: block;
}
As you can see all you need to do now to display a centered dialog on top of a dimmed page is to give body a class of "dimmed". With jQuery it couldn't be easier:
$('<a href="#">toggle dialog</a>').appendTo('#content').click(function() {
$(document.body).addClass('dimmed');
});
Happy coding!
Laters
Comments
2 comments so far, why don't you post one too?
Wednesday, February 11, 2009 | View all comments by cancel bubble
But you'd still be able to interact with the page behind the modal.
Wednesday, February 11, 2009 | View all comments by Andreas
@Cancel bubble - Yes, that's true. I actually didn't think about that at all :)
I do however think that most users will not try to interact with the page behind simply because it looks like you can't.
And those that are curious/geeky enough to test the limits could easily remove a normal div-overlay using for example Firebug so none of them actually prohibits the user if he really wants to ignore the modal.