基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
原理:
获取当前屏幕(窗体)的宽度和高度,因为不同浏览器的窗体大小是不一样的。有了这个,可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度,加到刚刚的y轴坐标即可。
$(document)是获取整个网页的,$(window)是获取当前窗体的,这个要搞清楚。
最后把获取的坐标赋给窗体即可,窗体本身是绝对定位的,所以自然可以到窗体中间。
最重要的代码:
var screenWidth = $(window).width();
var screenHeight = $(window).height(); //当前浏览器窗口的 宽高
var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度
var objLeft = (screenWidth - 2)/2 ; //2 可以根据需要修改
var objTop = (screenHeight - 100)/2 + scrolltop; //100可以根据需要修改
- <!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>