The example of this article describes the JS+CSS implementation of a pop-up centered background semi-transparent div layer method. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>js+css pop-up centered background semitransparent div layer </title>
<style type= "Text/css" >
body{margin:0px;}
#bg {width:100%;height:100%;top:0px;left:0px;position:absolute;filter:alpha (opacity=50); opacity:0.5 background: #000000; Display:none;}
#popbox {position:absolute;width:400px; height:400px; left:50%; top:50%; margin:-200px 0 0-200px; display:none; Background: #666666;}
</style>
<script type= "Text/javascript" >
function Pupopen () {
document.getElementById ("BG"). style.display= "Block";
document.getElementById ("PopBox"). style.display= "Block";
}
function Pupclose () {
document.getElementById ("BG"). style.display= "None";
document.getElementById ("PopBox"). style.display= "None";
}
</script>
<body>
</br>
CSS pop-up layer, or pop-up window, background translucent style pop-up box,</br> in the site login, user registration, bulletin tips are very suitable for use. </br>ie and Ff,op can be ~ pop-up windows, background translucent </br>
Principle: Two layers, a height and width are 100%, the other is you want to pop up the specific content of the window,</br> translucent in IE is used Filter:alpha (opacity=60), in non ie with opacity:0.60;
</br></br> <a href= "#" onclick= "Pupopen ()" > Click here to open the window </a>
<div id= "BG" ></div>
<div id= "PopBox" > two layers, one height and width are 100%, the other is the specific content of the window you want to pop up, translucent in IE is used Filter:alpha (opacity=60); opacity:0.60 in non ie ;
<br>
<br>
<br>
<a href= "#" onclick= "Pupclose ()" > Click Close Window </a>
</div>
</body>
I hope this article will help you with your JavaScript programming.
