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 相关文章推荐
javascript 函数使用说明
Apr 07 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
深度解读vue-resize的具体用法
Jul 08 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中ob_start函数的使用说明
2013/11/11 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
pyqt5中动画的使用详解
2020/04/01 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
求职简历自荐信
2013/10/20 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
小学生操行评语大全
2014/04/22 职场文书
3的组成教学反思
2014/04/30 职场文书
党员干部一句话承诺
2014/05/30 职场文书
2016入党心得体会范文
2016/01/06 职场文书
《检阅》教学反思
2016/02/22 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python