基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)


Posted in Javascript onSeptember 28, 2011

原理很简单:
获取当前屏幕(窗体)的宽度和高度,因为不同浏览器的窗体大小是不一样的。有了这个,可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度,加到刚刚的y轴坐标即可。
$(document)是获取整个网页的,$(window)是获取当前窗体的,这个要搞清楚。
最后把获取的坐标赋给窗体即可,窗体本身是绝对定位的,所以自然可以到窗体中间。
具体代码:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>弹出确认框始终位于窗口的中间位置的测试</title> 
<style type="text/css"> 
.mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity=50); display: none; z-index: 99; } 
.mess { position: absolute; display: none; width: 250px; height: 100px; border: 1px solid #ccc; background: #ececec; text-align: center; z-index: 101; } 
</style> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('.btn').click(function() { 
$('.mask').css({'display': 'block'}); 
center($('.mess')); 
check($(this).parent(), $('.btn1'), $('.btn2')); 
}); 
// 居中 
function center(obj) { 
var screenWidth = $(window).width(), screenHeight = $(window).height(); //当前浏览器窗口的 宽高 
var scrolltop = $(document).scrollTop();(),//获取当前窗口距离页面顶部高度 
var objLeft = (screenWidth - obj.width())/2 ; 
var objTop = (screenHeight - obj.height())/2 + scrolltop; 
obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); 
//浏览器窗口大小改变时 
$(window).resize(function() { 
screenWidth = $(window).width(); 
screenHeight = $(window).height(); 
scrolltop = $(document).scrollTop(); 
objLeft = (screenWidth - obj.width())/2 ; 
objTop = (screenHeight - obj.height())/2 + scrolltop; 
obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); 
}); 
//浏览器有滚动条时的操作、 
$(window).scroll(function() { 
screenWidth = $(window).width(); 
screenHeight = $(widow).height(); 
scrolltop = $(document).scrollTop(); 
objLeft = (screenWidth - obj.width())/2 ; 
objTop = (screenHeight - obj.height())/2 + scrolltop; 
obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); 
}); 
} 
//确定取消的操作 
function check(obj, obj1, obj2) { 
obj1.click(function() { 
obj.remove(); 
closed($('.mask'), $('.mess')); 
}); 
obj2.click(function() { 
closed($('.mask'), $('.mess')); 
}) ; 
} 
// 隐藏 的操作 
function closed(obj1, obj2) { 
obj1.hide(); 
obj2.hide(); 
} 
}); 
</script> 
</head> 
<body> 
<input type="button" class="btn" value="btn"/> 
<div>弹出确认框始终位于窗口的中间位置的测试</div> 
<div class="mask"></div> 
<div class="mess"> 
<p>确定要删除吗?</p> 
<p><input type="button" value="确定" class="btn1"/> 
<input type="button" value="取消"class="btn2"/></p> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
vue实现菜单切换功能
May 08 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 #Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 #Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 #Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 #Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 #Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 #Javascript
一个挺有意思的Javascript小问题说明
Sep 26 #Javascript
You might like
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
windows环境下tensorflow安装过程详解
2018/03/30 Python
Python3 修改默认环境的方法
2019/02/16 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
python将unicode和str互相转化的实现
2020/05/11 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
C语言编程练习
2012/04/02 面试题
恶意软件的定义
2014/11/12 面试题
2014教师党员个人自我评议
2014/09/20 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
2015年药房工作总结
2015/04/25 职场文书
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android