jQuery pop-up window complete code (center, left, right)_jquery

Core code:

Copy code The code is as follows:

//Get the height of the window
var windowHeight;
//Get the width of the window
var windowWidth;
//Get the width of the pop-up window
var popWidth;
//Get the height of the pop-up window
var popHeight;
function init(){
windowHeight=$(window).height();
windowWidth=$(window).width();
popHeight=$(".window").height( );
popWidth=$(".window").width();
}
//Method to close the window
function closeWindow(){
$(".title img" ).click(function(){
$(this).parent().parent().hide("slow");
});
}
//Define pop-up centered window Method
function popCenterWindow(){
init();
//Calculate the Y offset of 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();
//Calculate 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",50).slideToggle("slow");
closeWindow();
}
function popRightWindow(){
init();
//Calculate the Y offset of 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();
}

Full code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery Pop-up Window - Script Home</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> <div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;"> <input type="button" value="居中窗口" id="btn_center"> <input type="button" value="居左下角" id="btn_left"> <input type="button" value="居右下角" id="btn_right"> </div> <div class="window" id="center"> <div id="title" class="title"> <img src="http://files.jb51.net/file_images/article/201210/close.jpg" alt="jQuery pop-up window complete code (center, left, right)_jquery"> </div> <div class="content">Script Home-Centered Window</div> </div>www.jb51.net<div class="window" id="left"> <div id="title2" class="title"> <img src="http://files.jb51.net/file_images/article/201210/close.jpg" alt="jQuery pop-up window complete code (center, left, right)_jquery"> </div> <div class="content">Script Home-left window</div> </div>www.jb51.net<div class="window" id="right"> <div id="title3" class="title"> <img src="http://files.jb51.net/file_images/article/201210/close.jpg" alt="jQuery pop-up window complete code (center, left, right)_jquery"> </div> <div class="content">Script Home-right window</div> </div>www.jb51.net

[Ctrl A select all Note:
If you need to introduce external Js, you need to refresh to execute ]Author cnblogs jihua