Javascript + CSS implements the method of dimming the background in the Div pop-up window, cssdiv
This article describes how to darken the background while implementing the Div pop-up window in JS + CSS. Share it with you for your reference. The specific implementation method is as follows:
Copy codeThe Code is as follows: <Head>
<Title> the Div pop-up window implemented by JS + CSS, with the background dimmed </title>
<Script>
Function locking (){
Document. all. ly. style. display = "block ";
Document. all. ly. style. width = document. body. clientWidth;
Document. all. ly. style. height = document. body. clientHeight;
Document. all. Layer2.style. display = 'block ';
}
Function Lock_CheckForm (theForm ){
Document. all. ly. style. display = 'none'; document. all. Layer2.style. display = 'none ';
Return false;
}
</Script>
<Style type = "text/css">
<! --
. STYLE1 {font-size: 12px}
A: link {
Color: #000;
Text-decoration: none;
}
A: visited {
Text-decoration: none;
}
A: hover {
Text-decoration: none;
}
A: active {
Text-decoration: none;
}
-->
</Style>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
</Head>
<Body>
<P align = "center">
<Input type = "button" value = "pop-up DIV" onClick = "locking ()"/>
</P>
<Div id = "ly" style = "position: absolute; top: 0px; filter: alpha (opacity = 60); background-color: #777;
Z-index: 2; left: 0px; display: none; ">
</Div>
<! -- The floating layer framework starts -->
<Div id = "Layer2" align = "center" style = "position: absolute; z-index: 3; left: expression (document. body. offsetWidth-540)/2); top: expression (document. body. offsetHeight-170)/10 );
Background-color: # fff; display: none; ">
<Table width = "540" height = "300" border = "0" cellpadding = "0" cellspacing = "0" style = "border: 0 solid # e7e3e7;
Border-collapse: collapse; ">
<Tr>
<Td style = "background-color: #73A2d6; color: # fff; padding-left: 4px; padding-top: 2px;
Font-weight: bold; font-size: 12px; "height =" 10 "valign =" middle ">
<Div align = "right"> <a href = JavaScript:; class = "STYLE1" onclick = "Lock_CheckForm (this ); "> [close] </a> </div> </td>
</Tr>
<Tr>
<Td height = "130" align = "center">
<Br> </Td>
</Tr>
</Table>
</Div>
<! -- Floating layer framework ended -->
</Body>
</Html>
I hope this article will help you design javascript programs.