Js + CSS Implementation Method to bring up a translucent div layer with a center background
This article mainly introduces how to use javascript + CSS to pop up the center background translucent div layer. It involves the operation skills of javascript operations to pop up the div layer, which is very useful. For more information, see
This article describes how to use JavaScript + CSS to bring up a translucent div layer with a center background. Share it with you for your reference. The specific implementation method is as follows:
The Code is 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 pop-up center 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 a pop-up window with a translucent background, </br> is ideal for website logon, user registration, and announcement prompts. </Br> both IE and FF and OP can be ~ Pop-up window with a translucent background </br>
Principle: two layers, one of which is 100% in height and width, and the other is the specific content of the window to be popped up. </br> semi-transparent uses filter in IE: alpha (opacity = 60); opacity: 0.60 in non-IE;
</Br> <a href = "#" onclick = "pupopen ()"> click here to open the window </a>
<Div id = "bg"> </div>
<Div id = "popbox"> for two layers, the height and width of one layer are both 100%, and the other is the specific content of the window to be popped up. translucent uses filter in IE: alpha (opacity = 60); opacity: 0.60 in non-IE;
<Br>
<Br>
<Br>
<A href = "#" onclick = "pupclose ()"> click to close the window </a>
</Div>
</Body>
</Html>
I hope this article will help you design javascript programs.
