Home > Developer > JavaScript
The pop-up layer is always something that must be done at the front end. In general, if the pop-up layer has a fixed height and width, you can do it with a style, however, if there is no fixed height or fixed width or fixed height or width, we need to use JS to dynamically obtain the current window height or width. Today we have two situations, one is relative to the screen form, and the other is relative to the current window. Reading the code may be useful to you:
Copy codeThe 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> untitled document </title>
<Style>
Body {margin: 0px; padding: 0px}
# Div1 {background: # F00; color: # FFF; display: none; position: absolute ;}
# Div2 {background: #333333; color: # FFF; width: 400px; display: none; position: absolute ;}
</Style>
<Script type = "text/javascript" src = "http://jt.875.cn/js/jquery.js"> </script>
// Center the browser window vertically
<! --
<Script type = "text/javascript">
Function popup (popupName ){
Var _ scrollHeight = $ (document). scrollTop (), // obtain the height of the current window from the top of the page
_ Optional wheight = $ (window). height (), // get the current window height
_ Required wwidth = $ (window). width (), // obtain the current window width
_ PopupHeight = popupName. height (), // obtain the height of the pop-up layer
_ PopupWeight = popupName. width (); // obtain the pop-up layer width.
_ PosiTop = (_ windowHeight-_ popupHeight)/2 + _ scrollHeight;
_ PosiLeft = (_ Your wwidth-_ popupWeight)/2;
PopupName.css ({"left": _ posiLeft + "px", "top": _ posiTop + "px", "display": "block"}); // set position
}
$ (Function (){
$ (". Btn1"). click (function (){
Popup ($ ("# div1 "));
});
$ (". Btn2"). click (function (){
Popup ($ ("# div2 "));
});
});
</Script>
-->
// Center the current window vertically
<Script type = "text/javascript">
Function popup (popupName ){
_ Optional wheight = $ (". wrap"). height (), // get the current window height
_ Required wwidth = $ (". wrap"). width (), // get the current window width
_ PopupHeight = popupName. height (), // obtain the height of the pop-up layer
_ PopupWeight = popupName. width (); // obtain the pop-up layer width.
_ PosiTop = (_ shadowwheight-_ popupHeight)/2;
_ PosiLeft = (_ Your wwidth-_ popupWeight)/2;
PopupName.css ({"left": _ posiLeft + "px", "top": _ posiTop + "px", "display": "block"}); // set position
}
$ (Function (){
$ (". Btn1"). click (function (){
Popup ($ ("# div1 "));
});
$ (". Btn2"). click (function (){
Popup ($ ("# div2 "));
});
});
</Script>
</Head>
<Body>
<Div>
<Input class = "btn1" type = "button" value = "1"/> </div>
<Input class = "btn2" type = "button" value = "2"/> </div>
<Div style = "width: 500px; background: # ccc; position: relative; top: 100px; left: 200px;" class = "wrap">
I am the current window, Ah <br> I am the current window, I am current window. I am the current window. <br> I am the current window. I am the current window. <br> I am the current window. I am the current window. is the current window <br> I am the current window, I am the current window, and I am the current window.
<Br> I am the current window, and I am the current window.
<Div id = "div1"> I am the pop-up window 1111 <br> I am the pop-up window 1111 <br> I am the pop-up window 1111 <br> I am the pop-up window 1111 ah <br> I am the pop-up window 1111 <br> I am the pop-up window 1111 <br> I am the pop-up window 1111 </div>
<Div id = "div2"> I am the pop-up window 2222 <br> I am the pop-up window 2222 <br> I am the pop-up window 2222 <br> I am the pop-up window 2222 ah <br> I am the pop-up window 2222 </div>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
