The page mask layer prevents page body scrolling. Bootstrap modal box principle _ CSS/HTML

Recently, when performing mobile phone effects, you need to scroll the page in the drop-down menu to prevent Page scrolling. So I studied the implementation principle of the bootstrap modal box. Implementation ideas:

1. A layer is required to cover the body and place it above the body.

2. Modify the overflow attribute value of the body to "hidden ".

I don't need to talk about it anymore. I have posted the key code, which is compatible with Firefox, Google, and ie.

The pattern code of the mask layer. The red part is the key part.

The Code is as follows:

. Cover {
Position: fixed; top: 0px; right: 0px; bottom: 0px; filter: alpha (opacity = 60); background-color: #777;
Z-index: 1002; left: 0px; display: none;
Opacity: 0.5;-moz-opacity: 0.5;
}

Webpage code

The Code is as follows:

　　

　　　　

Click Show Mask Layer

　　

　　

Js Code

The Code is as follows:

Function showMask (){
Detail ('body'detail .css ("overflow", "hidden ")
$ ("# Cover"). show ();
}