Javascript and css method for implementing the pop-up layer covering the entire page _ javascript skills

This article mainly introduces how to overwrite the entire page by using the js and css pop-up layers, and demonstrates the css style and js control implementation skills of the pop-up layer covering the entire page in the form of examples, it is very practical. If you need it, you can refer to the examples in this article to describe how js and css implement the pop-up layer to cover the entire page. Share it with you for your reference. The specific implementation method is as follows:

The common style and structure of the pop-up transparent background box 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;
}

How to overwrite the entire webpage with the pop-up 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 });

Compared with the above two methods, the css method is obviously easier, especially when ie6 is not compatible.

I hope this article will help you with JS-based web programming.