Http://www.jb51.net/article/35216.htm Source Address
Today to use the JQuery pop-up layer, see a lot of things, for other plug-ins have to download, think of the need to download,
So I found a jquery/javascript code that only uses this, and I feel comfortable with it.
Then this website will keep it for yourself ~
<! 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> 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>
The browser window is centered vertically
<!--
<script type= "Text/javascript" >
function popup (popupname) {
var _scrollheight = $ (document). ScrollTop (),//Gets the current window height from the top of the page
_windowheight = $ (window). Height (),//Gets the current window height
_windowwidth = $ (window). Width (),//Gets the current window width
_popupheight = Popupname.height (),//Get pop-up layer height
_popupweight = Popupname.width ();//Get pop-up layer width
_positop = (_windowheight-_popupheight)/2 + _scrollheight;
_posileft = (_windowwidth-_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>
-
The current window is centered vertically
<script type= "Text/javascript" >
function popup (popupname) {
_windowheight = $ (". Wrap"). Height (),//Gets the current window height
_windowwidth = $ (". Wrap"). Width (),//Gets the current window width
_popupheight = Popupname.height (),//Get pop-up layer height
_popupweight = Popupname.width ();//Get pop-up layer width
_positop = (_windowheight-_popupheight)/2;
_posileft = (_windowwidth-_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>
<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 I am the current window AH I am the current window AH I am the current window AH I am the current window Ah <br> I am the current window AH I am the current window AH I am the current window Ah <br> I am the current window ah, I am the current window Ah <br > I am the current window AH I am the current window AH I am the current window Ah <br> I am the current window AH I am the current window AH I am the current window Ah
<br> I am the current window AH I am the current window AH I am the current window AH I am the current window Ah
<div id= "Div1" > I am a pop-up window 1111 Ah <br> I am a pop-up window 1111 Ah <br> I am a pop-up window 1111 Ah <br> I am a popup window 1111 AH <br> I am a pop-up window 1111 Ah <br> I am a pop-up window 1111 Ah <br> I am a pop-up window 1111 AH </div>
<div id= "Div2" > I am a pop-up window 2222 Ah <br> I am a pop-up window 2222 Ah <br> I am a pop-up window 2222 Ah <br> I am a popup window 2222 Ah <br> I'm a pop-up window 2222 AH </div>
</div>
</body>
About the jquery pop-up layer