Page mask layer and prevent the page body from scrolling. Bootstrap modal box principle_CSS/HTML

Implementation ideas:

1. There needs to be a layer to cover the body and place it above the body.

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

No more nonsense, the key code is posted, compatible with Firefox, Google, and IE

The style code of the mask layer, the red part is the key part

Copy code 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;
}

The code of the web page

Copy code The code is as follows:

Click me to display the mask layer

body>

JS part of the code

Copy code The code is as follows:

function showMask(){
$(' body').css("overflow","hidden")
$("#cover").show();
}