JS-layer mask effect

On the Internet, you can see the mask effect of a layer written in Js. Share with you.

The CSS style is as follows:

<style type="text/css">        .black_overlay        {            display: none;            position: absolute;            top: 0%;            left: 0%;            width: 100%;            height: 100%;            background-color: black;            z-index: 1001;            -moz-opacity: 0.8;            opacity: .80;            filter: alpha(opacity=80);        }        .white_content        {            display: none;            position: absolute;            top: 10%;            left: 10%;            width: 80%;            height: 80%;            border: 16px solid lightblue;            background-color: white;            z-index: 1002;            overflow: auto;        }        .white_content_small        {            display: none;            position: absolute;            top: 20%;            left: 30%;            width: 40%;            height: 50%;            border: 16px solid lightblue;            background-color: white;            z-index: 1002;            overflow: auto;        }    </style>

JS implementation:

<SCRIPT type = "text/JavaScript"> // the hidden layer function showdiv (show_div, bg_div) {document. getelementbyid (show_div ). style. display = 'block'; document. getelementbyid (bg_div ). style. display = 'block'; var bgdiv = document. getelementbyid (bg_div); bgdiv. style. width = document. body. scrollwidth; // bgdiv. style. height = $ (document ). height (); $ ("#" + bg_div ). height ($ (document ). height () ;}; // close the pop-up layer function closediv (show_div, bg_div) {document. getelementbyid (show_div ). style. display = 'none'; document. getelementbyid (bg_div ). style. display = 'none' ;}; </SCRIPT>

The HTML code is as follows:

<Input id = "button1" type = "button" value = "click the pop-up layer" onclick = "showdiv ('mydiv ', 'fade')"/> <! -- Background layer div --> <Div id = "Fade" class = "black_overlay"> </div> <Div id = "mydiv" class = "white_content"> <div style = "text-align: right; cursor: default; Height: 40px; "> <br/> <span style =" font-size: 16px; "onclick =" closediv ('mydiv ', 'fade ') "> close </span> </div> the mask layer. </Div> <br/> <center> layer mask effect </center>

The running effect is as follows:

 

Click the button to bring up the layer effect, as shown below:

However, when there is a scroll bar, the following cannot be covered ..