I believe that page pop-up windows like LightBox are also very common when browsing. It is not too difficult to implement. Today, CG extracts the JS part from the ETP project source code released last time for everyone to learn and use conveniently. Implementation principle: Use the float and overlap of DIV to set the Z-index of the dialog box to the highest. As for the mask layer, as long as the mask layer is below the dialog box layer and above other page elements, it is enough. If you need aesthetics, you can set a translucent effect.
CSS code as follows:
/*Message box*/
#messageBox{
position;
border:2px solid #3B5A6E;
background-color:#FFFFCC;
display;
z-index:9999; /*Bring the dialog box to the front*/
margin:0;
padding:0;
}
/*Message box title*/
#messageBox h2{
font-size:12px;
/*In the form of an image*/
background(top.gif);
border-bottom:1px solid #3B5A6E;
margin:0;
color:#FFFFFF;
padding:6px 10px 4px 10px;
}
/*Mask layer*/
#messageBoxMask{
position;
top:0; /*Start from (0,0)*/
left:0;
background-color:#CCCCCC;
/*The following controls the transparency effect, IE, FF*/
filter(opacity=50); /*IE*/
-moz-opacity:0.5; /*Compatible with older versions of FF*/
opacity:0.5; /*Compatible with Mozilla*/
z-index:9998; /*Bring the mask to the front*/
display;
margin:0;
padding:0;
}
Test source code download link: http://www.lidaren.com/code/MsgBox.zip