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随即打乱数组实现代码
Dec 03 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
原生js中运算符及流程控制示例详解
Jan 05 Javascript
js面向对象方式实现拖拽效果
Mar 03 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
使用Python监控文件内容变化代码实例
2018/06/04 Python
Python多图片合并PDF的方法
2019/01/03 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
python集合删除多种方法详解
2020/02/10 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
最新英语专业学生求职信范文
2013/09/21 职场文书
毕业生个人求职的自我评价
2013/10/28 职场文书
技术人员面试提纲
2013/11/28 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
2014年科普工作总结
2014/12/06 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers
JS class语法糖的深入剖析
2022/07/07 Javascript