Js control pop-up window to realize centered display at any resolution_javascript skills

贴代码

复制代码 代码如下:

csdn欢迎您

哈哈哈哈哈哈哈

csdn欢迎您

哈哈哈哈哈哈哈

csdn欢迎您

哈哈哈哈哈哈哈

JS

复制代码 代码如下:

//Height of the window
var windowHeight;
//Width of the window
var windowWidth;
//Height of the pop-up window
var popHeight;
/ /The width of the pop-up window
var popWidth;
//The height of the scroll bar scrolling
var scrollTop;
//The width of the scroll bar scrolling
var scrollleft;
//Delay time
var timeout;
function init(){
//Get the height of the window
windowHeight=$(window).height();
//Get the width of the window
windowWidth=$(window).width();
//Get the height of the pop-up window
popHeight=$(".window").height();
//Get the width of the pop-up window
popWidht=$(".window").width();
//Get the height of the scroll bar
scrollTop=$(window).scrollTop();
//Get the width of the scroll bar
scrollleft=$(window).scrollLeft();
}
//Define closing window
function closeWindow(){
$(".title img").click(function ( ){
$(this).parent().parent().hide("slow");

});

}
//Define the pop-up window Method
function popcenterWindow(){
//Clear the last delay first
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=(windowHeight-popHeight)/2 scrollTop;
var popX=(windowWidth-popWidht)/2 scrollleft;
$("#center").animate({top:popY,left:popX},300 ).show("slow");},300);
closeWindow();
}
function popleftWindow(){
clearTimeout(timeout);
timeout=setTimeout(function ( ){
init();
var popY=windowHeight scrollTop-popHeight-10;
var popX=scrollleft-5;
$("#left").animate({top:popY, left:popX},300).show("slow");},300);
closeWindow();
}
function poprightWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=windowHeight-popHeight scrollTop-10;
var popX=windowWidth-popWidht scrollleft-10;
$("#right" ).animate({top:popY,left:popX},300).show("slow");},300);
closeWindow();
}

CSS

Copy code The code is as follows:

.window{
width:250px;
background-color:#3FF;
padding:2px;
margin:5px;
position:absolute;
display:none;
}
.content{
height:150px;
background-color:#FFF;
padding:2px;
font-size:14px;
overflow:auto;
}

.title{
padding:2px;
color:#999;
font-size:14px;
}
.title img{
float:right;
cursor:pointer;
}