CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorer
Peter
Peter

Reputation: 38465

IE 7, Javascript transparent div onclick

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...

Upvotes: 0

Views: 5529

Answers (2)

b_o_y_a_n
b_o_y_a_n

Reputation: 41

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)";

Upvotes: 4

Philippe Leybaert
Philippe Leybaert

Reputation: 171764

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 comment, the blockUI plugin handles everything you may ever need if you want to mask your page with an overlay.

Upvotes: 2

Related Questions