JS pop-up window js popup div and darken the entire page background

1. First write a mask layer div and then write a popup div

<!--Mask Layer -<DivID= "Cover"style= "background: #000; position:absolute; left:0px; top:0px; width:100%; Filter:alpha (opacity=30); opacity:0.3; Display:none; Z-index:2 ">    </Div><!--pop -up window -<DivID= "Showdiv"style= "width:80%; margin:0 auto; height:9.5rem; border:1px solid #999; display:none; position:absolute; top:40%; le ft:10%; Z-index:3; Background: #fff ">    <!--title -    <Divstyle= "background: #F8F7F7; width:100%; height:2rem; font-size:0.65rem; line-height:2rem; border:1px solid #999; text- Align:center; " >Tips</Div>    <!--content -    <Divstyle= "text-indent:50px; height:4rem; font-size:0.5rem; padding:0.5rem; line-height:1rem; ">JS pop-up window js popup div and darken the entire page background</Div>    <!--Button -    <Divstyle= "background: #418BCA; width:80%; margin:0 auto; height:1.5rem; line-height:1.5rem; Text-align:center;color: #fff ; Margin-top:1rem; -moz-border-radius:. 128rem; -webkit-border-radius:. 128rem; Border-radius:. 128rem;font-size:. 59733rem; "onclick= "CloseWindow ()">Determine</Div></Div>

JS Code: (The introduction of JQ)

<script type= "Text/javascript" >//pop -up window    functionShowWindow () {$ (' #showdiv '). Show ();//Show pop -up window$ (' #cover '). CSS (' Display ', ' block ');//Show Matte Layer$ (' #cover '). CSS (' height ', document.body.clientheight+ ' px ');//sets the height of the matte layer to the current page height    }    //Close the pop -up window    functionCloseWindow () {$ (' #showdiv '). Hide ();//Hide Pop -up windows$ (' #cover '). CSS (' Display ', ' none ');//Show Matte Layer    }</script>

Effect:

JS pop-up window js popup div and darken the entire page background