基于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 相关文章推荐
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
移动端js触摸事件详解
Sep 18 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
javascript 事件处理程序介绍
2012/06/27 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
python tkinter实现屏保程序
2019/07/30 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
Python中的With语句的使用及原理
2020/07/29 Python
银行实习生自我鉴定范文
2013/09/19 职场文书
2014国培学习感言
2014/03/05 职场文书
ktv筹备计划书
2014/05/03 职场文书
冰峪沟导游词
2015/02/09 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python