Js+css How to implement a div popup with the background dimmed simultaneously Author: Code Home font: [increase Decrease] Type: Reprint This article mainly introduces the js+css to implement Div pop-up window background dimming method, is a typical JavaScript operation pop-up window skills, with a certain reference value, the need for friends can refer to the <iframe id= "Cproiframe_u1892994_2" width= "580" height= "src=" &aurl=&cad=1&ccd=24&cec=GBK&cfv=17&ch=0&col=zh-CN& amp;conbw=0&conop=1&cpa=1&dai=2&dis=0&ltr=http%3a%2f%2fwww.jb51.net% 2farticle%2f57630.htm&ltu=http%3a%2f%2fwww.jb51.net%2farticle%2f61741.htm&lu_161=0& Lunum=6&n=jb51_cpr&pcs=1201x652&pis=10000x10000&ps=514x135&psr= 1440x900&pss=1201x515&qn=d5e93fc096d23b99&rad=&rsi0=580&rsi1=90& Amp;rsi5=4&rss0=%23ffffff&rss1=%23f7fcff&rss2=%230000ff&rss3=%23444444& ; rss4=%23008000&rss5=&rss6=%23e10900&rss7=&scale=&skin=tabcloud_skin_3 &stid=5&td_id=1892994&titff=%e5%ae%8b%e4%bd%93&titfs=12&titta=left&tn=text_ Default_580_90&tpr=1439264178720&ts=1&version=2.0&xuanting=0&dtm=baidu _dup2_setjsonadslot&dc=2&di=u1892994&ti=js%2bcss%e5%ae%9e%e7%8e%b0div%e5%bc%b9%e5%87% Ba%e7%aa%97%e5%8f%a3%e5%90%8c%e6%97%b6%e8%83%8c%e6%99%af%e5%8f%98%e6%9a%97%e7%9a%84%e6%96%b9%e6%b3%95_ javascript%e6%8a%80%e5%b7%a7_%e8%84%9a%e6%9c%ac%e4%b9%8b%e5%ae%b6&tt=1439264178705.174.352.353 "Align=" Center,center "marginwidth=" 0 "marginheight=" 0 "scrolling=" no "frameborder=" 0 "allowtransparency=" true "></ Iframe>
The example of this article describes the method of Js+css to implement Div pop-up windows to darken the background. Share to everyone for your reference. The implementation methods are as follows:
Copy code code as follows: <TITLE>JS+CSS implementation of the Div pop-up window, while darkening the background </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 ';d ocument.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 ">
<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>
<!--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= "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=" 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><br></td>
</tr>
</table>
</div>
<!--floating Layer frame end-->
</body>