This article describes the method of popping out the centered background translucent div layer by js+CSS. Share it for your reference. The specific implementation method is as follows:
Copy the code as follows:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js+CSS pops up the centered background translucent 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>
</head>
<body>
</br>
The CSS pop-up layer, or pop-up window, has a translucent background pop-up box, is very suitable for website login, user registration, and announcement prompts. </br>IE and FF, OP can both~ pop-up window, the background is translucent</br>
Principle: Two layers, one has a height and width of 100%, and the other is the specific content of the window you want to pop up.</br>Serial translucency is used in IE: filter: Alpha(opacity=60); in non-IE use 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 has a height and width of 100%, and the other is the specific content of the window you want to pop up. Translucent is used in IE: filter: Alpha(opacity=60); in non-IE use opacity:0.60;
<br>
<br>
<br>
<a href="#" onclick="pupclose()">Click to close the window</a>
</div>
</body>
</html>
I hope this article will be helpful to everyone's JavaScript programming.