Using the Z-index property to implement a Web page popup box

Java Web application development process, some user action needs to be displayed in a popup box, today, the previous project development of the popup box implementation of the principle of a careful analysis, the use of CSS Z-index properties, you can achieve a simple popup box effect. Specific principle:

. mask{z-index:900; position:fixed!important; position:absolute; left:0px; top:0px; width:100%; height:100%;  

<!--current page content display div z-index min--><div class= "Shell" id= "content" ></div><!--Mask is responsible for the background to gray out, Z-index for--><div class= "mask" style= "Display:none;" ></div><!--pop-up box Div,z-index-900,div_op show at the top of the page--><div class= "box"  style= "display:none; position:absolute;top:50%;left:50%;width:520px;height:auto;z-index:999; margin: -150px 0px 0px-260px; "id=" Div_op "></div>

A user action that triggers $ (". Mask"). Show (); $ ("#div_op"). Show (), due to the z-index>content of the mask, and Div_op Z-index>mask, combined with the position attribute, set the popup position as the center part of the Web page, When the position of CSS is absolute, the specified top and left are equal to the location-related properties, and the margin adjusts div_op relative to the position of its parent element, and on the basis of top:50%;left:50%, moves the distance up and down, respectively. Causes the popup box to be centered eventually. The simple pop-up effect is as follows:

A simple example of an HTM file:

Using the Z-index property to implement a Web page popup box