CODEWITHSUNDEEP
javascriptjquery
Naveen
Naveen

Reputation: 791

block screen on pop up javascript

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.

Upvotes: 0

Views: 1821

Answers (2)

maxlego
maxlego

Reputation: 4914

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.

Upvotes: 1

Davor Mlinaric
Davor Mlinaric

Reputation: 2027

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;
}

Upvotes: 1

Related Questions