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 相关文章推荐
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
Javascript之Math对象详解
Jun 07 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
JS继承最简单的理解方式
Mar 31 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世纪万年历
2006/12/06 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
任意位置显示html菜单
2007/02/01 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
Python温度转换实例分析
2018/01/17 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
Python实现把类当做字典来访问
2019/12/16 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
技术总监的工作职责
2013/11/13 职场文书
运动会获奖感言
2014/02/11 职场文书
2014年情人节活动方案
2014/02/16 职场文书
竞聘书模板
2014/03/31 职场文书
运动会口号大全
2014/06/07 职场文书
小学重阳节活动总结
2015/03/24 职场文书
高中运动会前导词
2015/07/20 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
利用python进行数据加载
2021/06/20 Python
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android