Home > Web Front-end > JS Tutorial > Js control pop-up window to realize centered display at any resolution_javascript skills

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

WBOY
Release: 2016-05-16 17:27:26
Original
1886 people have browsed it

贴代码

复制代码 代码如下:





弹出窗口_www.jb51.net















































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;
}

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template