I recently saw an example of transparent floating layer coverage using CSS + JavaScript on the Internet. I found that there was a small bug in his method. So I changed it. Now there is no problem ~~ If you are the original author of this Code, forgive me for modifying your code. Everyone is communicating for learning ~~
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> </title>
<Style type = "text/CSS">
# Lockwindows {
Position: absolute; top: 10px; left: 10px; Background-color: #777777; Z-index: 2; display: none;
/* Use the private property of Moz family-moz-opacity: 0.70 */
/* Use private attribute filter for IE */
/* The standard attribute opacity supports css3 browsers (FF 1.5 is also supported )*/
Opacity: 0.70;
Filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 70, finishopacity = 100 );
Width: expression (documentelement. clientwidth <900? (Documentelement. clientwidth = 0? (Body. clientwidth <900? '200': 'auto'): '900px '): 'auto ');
}
# Windowdiv {position: absolute; Z-index: 3; Background-color: # ffffff; Border: #000000 solid 1px; display: none ;}
</Style>
<SCRIPT type = "text/JavaScript">
// Hide the drop-down box to solve the problem that the drop-down box has a high priority,
Function _ displayselect (){
VaR selects = Document. getelementsbytagname ("select"); [color = #99cc00] // all the drop-down boxes of the entire page
VaR objwindow = Document. getelementbyid ("windowdiv ");
VaR divselects = objwindow. getelementsbytagname ("select"); // all the drop-down boxes of the entire pop-up layer
For (VAR I = 0; I <selects. length; I ++ ){
If (selects [I]. style. Visibility ){
Selects [I]. style. Visibility = "";
} Else {
Selects [I]. style. Visibility = "hidden ";
For (var j = 0; I <divselects. length; j ++ ){
Divselects [J]. style. Visibility = "";
}
}
}
}
I personally think this can be used ~~
[/Color]
Function openwindows (width, height ){
VaR objwindow = Document. getelementbyid ("windowdiv ");
VaR objlock = Document. getelementbyid ("lockwindows"); // This is used to block content in IE
Objlock. style. Display = "Block ";
Objlock. style. width = Document. Body. clientwidth + "PX ";
Objlock. style. Height = Document. Body. clientheight + "PX ";
Objlock. style. minwidth = Document. Body. clientwidth + "PX ";
Objlock. style. minheight = Document. Body. clientheight + "PX ";
// Determine whether the input width and height are greater than the width and height of the current Browser
If (width> document. Body. clientwidth)
Width = Document. Body. clientwidth;
If (height> document. Body. clientheight)
Height = Document. Body. clientheight;
Objwindow. style. Display = "Block ";
Objwindow. style. width = width + "PX ";
Objwindow. style. Height = height + "PX ";
// Center the pop-up layer
Objwindow. style. Left = (document. Body. offsetwidth-width)/2 + "PX ";
Objwindow. style. Top = (document. Body. offsetheight-height)/2 + "PX ";
// _ Displayselect ();
}
Function hiddenwindows (){
Lockwindows. style. Display = 'none ';
Windowdiv. style. Display = 'none ';
// _ Displayselect ();
}
</SCRIPT>
</Head>
<Body>
<Div id = "lockwindows"> <br>
<Div id = "windowdiv" align = "center">
<Input type = "button" onclick = "hiddenwindows ();" value = "close"/>
</Div>
</Div>
<Input type = "button" onclick = "openwindows ('20160301', '20160301');" value = "edit">
<Br>
<A href = "http://www.google.com"> ABC </a>
</Body>
</Html>
Note: Firefox can also be used, but it has no center effect. If you know how to implement center in Firefox, please advise. Thank you!