block screen on pop up javascript

Question

I have created a pop up which is a div element and I want to block screen when it is shown, it is closed by a cross sign on the div like a regular dialog model. How can I block the screen on pop up and unblock when it in close.

Answer 1

this is code i use, it will show transparent div over whole screen.

http://jsfiddle.net/ZFxWz/

.box {
    display:;
    filter: alpha(opacity=30);
    text-align:center;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    -moz-opacity: .30;
    -khtml-opacity: 0.3;
    opacity: 0.3;
    background-color:black;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    text-align:center;
    vertical-align:middle;
}

Answer 2

behind popup div create another div (ie. zindex must be lower that popup zindex)

<div class="overlay"></div

css:

.overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100% }

if you want that screen looks darker or lighter you can also set background-color and opacity.

.overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #000; opacity: 0.2; }

EDIT:

Since the overlay is on top of all other elements and you cant click through a layer, basically it will block screen. The only way you can access to elements behind overlay is to click on overlay and press tab. To prevent that, you have to bind click event to overlay which will keep focus in your popup.