This article describes the JS+CSS implementation with the Close Button div pop-up window method. Share to everyone for your reference. The implementation methods are as follows:
<title>js+css Implement div popup with close button </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: #FFFFFF;
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" >
</td>
</tr>
</table>
</div>
<!--floating Layer frame end-->
</body>
I hope this article will help you with your JavaScript programming.
