jQuery弹出层始终垂直居中相对于屏幕或当前窗口


Posted in Javascript onApril 01, 2013

弹出层永远是一个前端必须搞定的东西,一般情况下,如果弹出层有固定的高和宽,用样式即可搞定,但是如果碰到没有固定高或者固定宽或者固定高和宽的时候,我们就需要用JS去处理,去动态获取当前窗口高或者宽;今天弄了2种情况,一个是相对于屏幕窗体,一个是相对于当前的窗口,看代码,或许对你有用:

<!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>无标题文档</title> 
<style> 
body{margin:0px;padding:0px} 
#div1{background:#F00;color: #FFF; display:none;position:absolute;} 
#div2{background:#333333;color: #FFF;width:400px;display:none; position:absolute;} 
</style> 
<Script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
//浏览器窗口垂直居中 
<!-- 
<Script type="text/javascript"> 
function popup(popupName){ 
var _scrollHeight = $(document).scrollTop(),//获取当前窗口距离页面顶部高度 
_windowHeight = $(window).height(),//获取当前窗口高度 
_windowWidth = $(window).width(),//获取当前窗口宽度 
_popupHeight = popupName.height(),//获取弹出层高度 
_popupWeight = popupName.width();//获取弹出层宽度 
_posiTop = (_windowHeight - _popupHeight)/2 + _scrollHeight; 
_posiLeft = (_windowWidth - _popupWeight)/2; 
popupName.css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//设置position 
} 
$(function(){ 
$(".btn1").click(function(){ 
popup($("#div1")); 
}); 
$(".btn2").click(function(){ 
popup($("#div2")); 
}); 
}); 
</script> 
--> 
//当前窗口垂直居中 
<Script type="text/javascript"> 
function popup(popupName){ 
_windowHeight = $(".wrap").height(),//获取当前窗口高度 
_windowWidth = $(".wrap").width(),//获取当前窗口宽度 
_popupHeight = popupName.height(),//获取弹出层高度 
_popupWeight = popupName.width();//获取弹出层宽度 
_posiTop = (_windowHeight - _popupHeight)/2; 
_posiLeft = (_windowWidth - _popupWeight)/2; 
popupName.css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//设置position 
} 
$(function(){ 
$(".btn1").click(function(){ 
popup($("#div1")); 
}); 
$(".btn2").click(function(){ 
popup($("#div2")); 
}); 
}); 
</script> 
</head> 
<body > 
<div > 
<input class="btn1" type="button" value="1"/></div> 
<input class="btn2" type="button" value="2"/></div> 
<div style="width:500px; background:#ccc; position:relative; top:100px; left:200px;" class="wrap"> 
我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊 
<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊 
<div id="div1">我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹出窗口1111啊</div> 
<div id="div2">我是弹出窗口2222啊<br>我是弹出窗口2222啊<br>我是弹出窗口2222啊<br>我是弹出窗口2222啊<br>我是弹出窗口2222啊</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
轻量级 JS ToolTip提示效果
Jul 20 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 #Javascript
表格单元格交错着色实现思路及代码
Apr 01 #Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 #Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 #Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 #Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 #Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 #Javascript
You might like
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
浅谈php冒泡排序
2014/12/30 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
python多进程并发demo实例解析
2019/12/13 Python
Python3 assert断言实现原理解析
2020/03/02 Python
Python如何测试stdout输出
2020/08/10 Python
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
ORACLE十问
2015/04/20 面试题
教师绩效工资方案
2014/02/01 职场文书
诚信承诺书范文
2014/03/27 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
警示教育观后感
2015/06/17 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
解析redis hash应用场景和常用命令
2021/08/04 Redis