Archives for Tuesday, February 10th, 2009
You are currently browsing 1 article(s) published on Tuesday, February 10th, 2009, please try the search if you can't fint what you're looking for.
An alternative to DIV overlays
Tuesday, February 10, 2009
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 are off
- Filed under CSS, Javascript, jQuery
