Question

I have a layer that is presented by a logic var.

that layer is just a hidden div – how do I make it so the layer is the only element that can be interacted with on the page when it is visible?

thanks!

Update:

used a full size div in the background with a transparent gif – works in firefox, but not IE – thoughts?

#overlay {
    background-image: url('../images/transparent.gif');
    width:100%;
    height:100%;
    z-index:8999;
    display:none;
    margin-top: 0;
    margin-left:0;
    position:fixed;
}

Answer 1

The basic approach is to put a semi-transparent element over your whole page, but under your modal window that contains your focus element. JQuery doesn’t have this built in, so you can either create your own using that approach or use a JQuery plugin.

UPDATE:

Here’s a fiddle based on the comment discussion. I’ve tested this and it works in IE8, Firefox 3.5.15, and Chrome 12.0.742.112.

HTML:

<div class="overlay"></div>
<div>test</div>
<input/>

<div class="modalWindow ">
    foo:
    <input/>
</div>

CSS:

.overlay {
    opacity:.1;
    filter:alpha(opacity=10);
    background-color: black;
    width:100%;
    height:100%;
    z-index:8999;
    margin-top: 0;
    margin-left:0;
    position:fixed;
}

.modalWindow {
    z-index:9000;
    position: fixed;
    background-color: white;
    top: 20px;
    left: 20px;
    width: 200px;
    height: 100px;
}