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 相关文章推荐
使用jquery清空、复位整个输入域
Apr 02 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
node.js +mongdb实现登录功能
Jun 18 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
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自定义函数返回多个值
2006/11/26 PHP
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
初识PHP中的Swoole
2016/04/05 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
实例讲解PHP表单
2020/06/10 PHP
新闻内页-JS分页
2006/06/07 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Django 框架模型操作入门教程
2019/11/05 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
移动通信行业实习自我鉴定
2013/09/28 职场文书
办理居住证介绍信
2014/01/15 职场文书
追悼会答谢词范文
2015/09/29 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers