Well i have a transparent div or the background is set to transparent :) css:

#lowerLayer
{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-color: Transparent;
    cursor: help;
    z-index: 1;
}

The div is placed right under the tag.. and under there i have a blueprint layout.

jquery(this is run in $(document).ready):

$("#lowerLayer").click(function() {
    $(this).fadeTo("fast", 0, function() {
        $(this).hide(0);
    });
});

My layout works perfect in Opera 10 and i guess it works in Opera 9 to... but IE 7 bugs layers that have lower z-index are acting as they are above the transparent div...

Well i have a transparent div or the background is set to transparent :) css:

#lowerLayer
{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-color: Transparent;
    cursor: help;
    z-index: 1;
}

The div is placed right under the tag.. and under there i have a blueprint layout.

jquery(this is run in $(document).ready):

$("#lowerLayer").click(function() {
    $(this).fadeTo("fast", 0, function() {
        $(this).hide(0);
    });
});

My layout works perfect in Opera 10 and i guess it works in Opera 9 to... but IE 7 bugs layers that have lower z-index are acting as they are above the transparent div...

• javascript
• jquery
• html
• internet-explorer

2 Answers 2

I had same problem with IE7 and found easier solution. Instead making your div transparent using css use javascript to set it's opacity.

Following your example:

css style

#lowerLayer {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #000;
cursor: help;
z-index: 1;
}

javascript code (e.g. after DOM tree is loaded)

document.getElementById("lowerLayer").style.filter = "alpha(opacity=0)";

A simple solution would be to place the transparent div (#lowerLayer) last in the html (just before the closing </body>.

It's a known issue with some browsers (IE for example)

EDIT: as mentioned in my ment, the blockUI plugin handles everything you may ever need if you want to mask your page with an overlay.