A follow-up to "An alternative to div overlays"
Published Friday, February 13, 2009 in CSS, Javascript
"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
1 comments so far, why don't you post one too?
Friday, June 05, 2009 | View all comments by Vlad
I'll try this..