Simple Jquery mask layer code example _ jquery-js tutorial

This article introduces a simple Jquery mask layer code example. If you need it, you can refer to the Css code.

The Code is as follows:

# Brg
{
Width: 100%;
Height: 100%;
Background: #333;
Position: absolute;
Top: 0;
Left: 0;
Filter: alpha (opacity = 60 );
-Moz-opacity: 0.6;
Opacity: 0.6;
Position: absolute;
Top: 0;
Left: 0;
Display: none;
}
# Showp
{
Width: 100%;
Height: auto;
Position: absolute;
Left: 300px;
Top: 150px;
Z-index: 330;
Display: none;
}
# Testp
{
Width: 800px;
Height: auto;
Margin: 0 0;
Border: 1px solid # 4d4d4d;
Background: # f2f2f2;
}
# Close
{
Width: 200px;
Height: 27px;
Line-height: 27px;
Font-size: 14px;
Font-weight: bold;
Border: 1px solid # 4d4d4d;
Text-align: center;
Cursor: pointer;
Margin: 0 auto;
Background: #333;
Color: # fff;
}

Html code

The Code is as follows:

Close

Content to be displayed

Jquery code

The Code is as follows:

$ (Document). ready (function (){
Var bheight = document. body. clientHeight;
$ ("# BtnAdd"). click (function (){
$ ("# Brg" ).css ("display", "block ");
$ ("# Showp" ).css ("display", "block ");
$ ("# Brg" ).css ("height", document. body. scrollHeight );
$ ("# Showp" ).css ("top", document. body. scrollTop + 100 );
});
$ ("# Close"). click (function (){
$ ("# Brg" ).css ("display", "none ");
$ ("# Showp" mirror.css ("display", "none ");
});
});