Archives for February 2009
You are currently browsing 2 article(s) published in February 2009, please try the search if you can't fint what you're looking for.
A follow-up to "An alternative to div overlays"
Friday, February 13, 2009
"Cancel Bubble" pointed out in my previous post one thing that I hadn't thought of; users can still interact with the page behind when you don't use an actual element to cover it.
So, to solve this, but still use the same .dimmed-class on body, I simply added an empty div-element to body using JS:
.... code ...
<script type="text/javascript">
var div = document.createElement('div');
div.id = 'body-overlay';
document.body.appendChild(div);
</script>
</body>
And styled it, too, under body.dimmed:
#body-overlay {
background: #000;
opacity: .8;
z-index: 1;
position: fixed;
left: 0;
top: 0;
display: none;
width: 100%;
height: 100%;
}
body.dimmed #body-overlay {
display: block;
}
Together with the .dialog-styling I still only need to switch body's class to display a centered, modal dialog on top of a (now) non-interactive, dimmed page.
IE6 won't understand position: fixed; but I'm one of those that no longer care about IE6.
- Comments are off
- Filed under CSS, Javascript
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
