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.