Core code:
Copy Code code as follows:
Get the height of the window
var windowheight;
Get the width of the window
var windowwidth;
To get the width of the elastic window
var popwidth;
Get window Height
var popheight;
function init () {
windowheight=$ (window). Height ();
windowwidth=$ (window). width ();
popheight=$ (". Window"). Height ();
popwidth=$ (". Window"). width ();
}
Ways to close a window
function CloseWindow () {
$ (". Title img"). Click (function () {
$ (this). Parent (). Parent (). Hide ("slow");
});
}
To define a way to eject the center window
function Popcenterwindow () {
Init ();
Calculates the offset of y in the upper-left corner of the pop-up window
var popy= (windowheight-popheight)/2;
var popx= (windowwidth-popwidth)/2;
Alert (' www.jb51.net ');
Set the position of the window
$ ("#center"). CSS ("top", Popy). CSS ("left", popx). Slidetoggle ("slow");
CloseWindow ();
}
function Popleftwindow () {
Init ();
Calculates the offset of y in the upper-left corner of the pop-up window
var popy=windowheight-popheight;
var popx=-(windowwidth-popwidth);
alert (popy);
Set the position of the window
$ ("#left"). CSS ("top", popY-50). CSS ("left"). Slidetoggle ("slow");
CloseWindow ();
}
function Poprightwindow () {
Init ();
Calculates the offset of y in the upper-left corner of the pop-up window
var popy=windowheight-popheight;
var popx=windowwidth-popwidth;
alert (Www.cnblogs.com/jihua);
Set the position of the window
$ ("#right"). CSS ("top", popY-50). CSS ("left", popX-50). Slidetoggle ("slow");
CloseWindow ();
}
Complete code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>jquery pop-up window-Cloud habitat Community </title> <style type= text/css" window{"> width:250px; Background-color: #d0def0; Position:absolute; padding:2px; margin:5px; Display:none; }. content{height:150px; Background-color: #FFF; font-size:14px; Overflow:auto; }. title{padding:2px; Color: #0CF; font-size:14px; }. title img{float:right; } </style> <script type= "Text/javascript" src= http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/ Jquery.min.js "></script> <script type=" Text/javascript "language=" JavaScript "> $ (document). Ready ( Function () {$ ("#btn_center"). Click (function () {Popcenterwindow (); }); $ ("#btn_right"). Click (function () {Poprightwindow (); }); $("#Btn_left "). Click (function () {Popleftwindow (); }); }); </script> </pead> <body> <div > <input type= "button" value= "Center Window" id= "Btn_center"/> &L T;input type= "button" value= "in the lower left corner" id= "Btn_left"/> <input "type=" button "value=" in the lower right corner "id=" Btn_right "/> </di v> <div class= "window" id= "center" > <div id= "title" class= "title" > Cloud-dwelling Community-center window </div> <div class= " Content >www.jb51.net</div> </div> <div class= window id= left > <div id= title2 class= Le "> Yun-Habitat Community-Home left window </div> <div class=" content ">www.jb51.net</div> </div> <div class=" window "Id=" right "> <div id=" title3 "class=" title "> Yun-Habitat Community-Home right-hand window </div> <div class=" content ">www.jb51.net </div> </div> <script type= "Text/javascript" >//Get window height var windowheight; Gets the width of the window var windowwidth; Get the width of the window popwidth var; Get the height of the window popheight var; function init () {windowheight=$ window). Height (); windowwidth=$ (window). width (); popheight=$ (". Window"). Height (); popwidth=$ (". Window"). width (); The method function CloseWindow () {$ (". Title img") of the window is closed. Click (function () {$ (this). Parent (). Parent (). Hide ("slow"); }); }//define method function Popcenterwindow () {init () to eject the center window; Calculates the offset of y in the upper-left corner of the pop-up window var popy= (windowheight-popheight)/2; var popx= (windowwidth-popwidth)/2; Alert (' www.jb51.net '); Set the position of the window $ ("#center"). CSS ("top", Popy). CSS ("left", popx). Slidetoggle ("slow"); CloseWindow (); function Popleftwindow () {init (); Calculates the offset of y in the upper-left corner of the pop-up window Var popy=windowheight-popheight; var popx=-(windowwidth-popwidth); alert (popy); Set the position of the window $ ("#left"). CSS ("top", popY-50). CSS ("left"). Slidetoggle ("slow"); CloseWindow (); function Poprightwindow () {init (); Calculates the offset of y in the upper-left corner of the pop-up window Var popy=windowheight-popheight; var popx=windowwidth-popwidth; alert (Www.cnblogs.com/jihua); Set the position of the window $ ("#right"). CSS ("top", popY-50). CSS ("left", popX-50). Slidetoggle ("slow"); CloseWindow (); }</script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Author Cnblogs Jihua
