Js控制弹窗实现在任意分辨率下居中显示

弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示。
1，html部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出窗口_www.jbxue.com</title>
<link type="text/css" rel="stylesheet" href="window.css">
<script language="javascript" type="text/javascript" src="../../jquery/jquery.js"></script>
<script language="javascript" type="text/javascript" src="window.js"></script>
<script language="javascript">
$(document).ready(function (){
$("#btn_center").click(function (){
$(window).scroll(function (){
popcenterWindow();
});
});
$("#btn_right").click(function (){
$(window).scroll(function (){
poprightWindow();
});
});
$("#btn_left").click(function (){
$(window).scroll(function (){
popleftWindow();
});
});
});
</script>
</head>
<body>
<input type="button" value="弹出居中的窗口" id="btn_center">
<input type="button" value="弹出居右的窗口" id="btn_right">
<input type="button" value="弹出居左的窗口" id="btn_left">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="window" id="center">
<div class="title"><img src="close.gif">csdn欢迎您</div>
<div class="content">哈哈哈哈哈哈哈</div>
</div>
<div class="window" id="right">
<div class="title"><img src="close.gif">csdn欢迎您</div>
<div class="content">哈哈哈哈哈哈哈</div>
</div>
<div class="window" id="left">
<div class="title"><img src="close.gif">csdn欢迎您</div>
<div class="content">哈哈哈哈哈哈哈</div>
</div>
</body>
</html>

2，js代码部分

<script>
//窗口的高度
var windowHeight;
//窗口的宽度
var windowWidth;
//弹窗的高度
var popHeight;
//弹窗的宽度
var popWidth;
//滚动条滚动的高度
var scrollTop;
//滚动条滚动的宽度
var scrollleft;
//延时的时间
var timeout;
function init(){//获得窗口的高度
windowHeight=$(window).height();
//获得窗口的宽度
windowWidth=$(window).width();
//获得弹窗的高度
popHeight=$(".window").height();
//获得弹窗的宽度
popWidht=$(".window").width();
//获得滚动条的高度
scrollTop=$(window).scrollTop();
//获得滚动条的宽度
scrollleft=$(window).scrollLeft();
}
//定义关闭窗口
function closeWindow(){$(".title img").click(function (){
$(this).parent().parent().hide("slow");});}
//定义弹出窗口的方法
function popcenterWindow(){//先清空上一次的延迟
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();
}
</script>

3，CSS代码部分

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

Js控制弹窗实现在任意分辨率下居中显示相关推荐

UGUI UI在不同分辨率下的显示（Design UI For Multiple Resolutions）
1.分辨率改变的同时元素的相关设置: (1)在分辨率改变的时候,画布中的元素会相应的移动,如果要在不同的分辨率中UI还得正常显示,那么就需要调整对应的锚点,绑定在画布对应的位置,在分辨率改变的同时就可 ...
css绝对定位如何在不同分辨率下的电脑正常显示定位位置？
有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用. 首先要明白如下几个原理: 1.笔记本电脑的分辨率一般为1 ...
vue-008-如何做到在不同尺寸显示器，浏览器100%分辨率下，页面完整展示
前一阵测试提交故障:在屏幕较小的显示器上,浏览器100%分辨率下页面显示不全,需要通过拖拽的方式才可以显示其余.要求修改成不同尺寸显示器,浏览器100%分辨率情况下页面要展示完整. 我的解决办法如下: ...
chosen.jquery.js 、chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值，chosen 实现远程搜索加载下拉选项
chosen.jquery.js .chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值,chosen 实现远程搜索加载下拉选项 chosen. ...
JS控制下的双层Tab切换
如题,JS控制下的双层Tab切换,其实只要想通了原理,实现起来很简单! <style type="text/css"> img{border:none;padding: ...
html绝对定位自适应不同分辨率,(css)绝对定位如何在不同分辨率下的电脑正常显示位置？...
关于网友提出的" (css)绝对定位如何在不同分辨率下的电脑正常显示位置?"问题疑问,本网通过在网上对" (css)绝对定位如何在不同分辨率下的电脑正常显示位置?&quo ...
Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
Screenfly – 各种设备的屏幕和分辨率下快速测试网站
Screenfly 让你能够在各种设备的屏幕和分辨率下查看你的网站.输入网址,并点击GO开始浏览网页.Screenfly 可以使用代理服务器来模拟设备,当您查看您的网站,代理服务器模仿您所选择的设备的 ...
js控制使div自动适应居中
一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DI ...

Js控制弹窗实现在任意分辨率下居中显示

Js控制弹窗实现在任意分辨率下居中显示相关推荐

最新文章

热门文章