JS and CSS Implementation of the pop-up layer to cover the entire page method

This article describes the JS and CSS implementation of the pop-up layer to cover the entire page of the method. Share to everyone for your reference. The implementation methods are as follows:

The common styles and structures for pop-up layer transparent backgrounds and frames are as follows:

The

code is as follows:. alertmessagebg{


position:fixed;


_position:absolute;


width:100%;


height:100%;


left:0;


top:0;


background: #000;


opacity:0.5;


-moz-opacity:0.5;


Filter:alpha (OPACITY=50);


z-index:97;


Display:none;


}


. alertmessagedivborder{


position:fixed;


_position:absolute;


width:750px;


height:370px;


left:50%;


top:50%;


margin:-185px 0 0-375px;


background: #000;


Filter:alpha (opacity=30);


-moz-opacity:0.3;


opacity:0.3;


z-index:98;


Display:none;


}


. alertmessagediv{


position:fixed;


_position:absolute;


width:730px;


height:350px;


left:50%;


top:50%;


margin:-175px 0 0-365px;


background: #fff;


z-index:99;


Display:none;


font-size:14px;


}

<div class= "ALERTMESSAGEBG" ></div>
<div class= "Alertmessagedivborder" ></div>
<div class= "Alertmessagediv" ></div>

A way to cover the entire Web page with a pop-up layer background

1.css method

The

code is as follows:. alertmessagebg{


position:fixed;


_position:absolute;


width:100%;


height:100%;


left:0;


top:0;


background: #000;


opacity:0.5;


-moz-opacity:0.5;


Filter:alpha (OPACITY=50);


z-index:97;


Display:none;


}

2.js method

The

code is as follows:. alertmessagebg{


Position:absolute;


width:100%;


height:100%;


left:0;


top:0;


background: #000;


opacity:0.5;


-moz-opacity:0.5;


Filter:alpha (OPACITY=50);


z-index:97;


Display:none;


}

var bgwidth = document.body.clientWidth + ' px ',
Bgheight = document.body.clientHeight + ' px ',
Alertbgnode = $ ('. Alertmessagebg ');
Alertbgnode.css ({' width ': bgwidth, ' height ': bgheight});

Comparing the above two methods, it is obvious that the CSS method is more convenient, especially in the current without compatible IE6.

I hope this article will help you with the Web design based on JS.