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


Posted in Javascript onAugust 01, 2013

贴代码

<!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>弹出窗口_3water.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>

JS
//窗口的高度 
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(); 
}

CSS
<SPAN style="FONT-SIZE: 18px">.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; 
}</SPAN>
Javascript 相关文章推荐
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
js实现常见的工具条效果
Mar 02 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 #Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 #Javascript
Javascript 遮罩层和加载效果代码
Aug 01 #Javascript
JS防止用户多次提交的简单代码
Aug 01 #Javascript
纯文字版返回顶端的js代码
Aug 01 #Javascript
JS实现随机化快速排序的实例代码
Aug 01 #Javascript
js中的前绑定和后绑定详解
Aug 01 #Javascript
You might like
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
pytorch的batch normalize使用详解
2020/01/15 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
资助贫困学生倡议书
2014/05/16 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
承诺书模板大全
2015/05/04 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
法定授权委托证明书
2015/06/18 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
Python turtle编写简单的球类小游戏
2022/03/31 Python
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby