基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
原理很简单：
获取当前屏幕(窗体)的宽度和高度，因为不同浏览器的窗体大小是不一样的。有了这个，可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢？这个时候就要获取当前窗体距离页面顶部的高度，加到刚刚的y轴坐标即可。
$(document)是获取整个网页的，$(window)是获取当前窗体的，这个要搞清楚。
最后把获取的坐标赋给窗体即可，窗体本身是绝对定位的，所以自然可以到窗体中间。
具体代码：
复制代码 代码如下:
弹出确认框始终位于窗口的中间位置的测试
.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; }
$(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();
}
});
弹出确认框始终位于窗口的中间位置的测试
确定要删除吗？
相关阅读:
MySQL的中文UTF8乱码问题
邮件传输原理及相关入门知识概述
封装数据库操作,Javabean给数据库瘦身
给php新手谈谈我的学习心得
Sybase教程：复制与热切换数据
通过具体程序来理解PHP里面的抽象类
信使(iptux)：Linux下的飞鸽传书
Windows系统的鼠标拖放操作的技巧
php中的观察者模式
SPAN和DIV,Class与ID的区别汇总
Windows和Linux程序并存同一桌面
数据集中浏览多个相关表 1
MySQL性能设置
Javascript学习笔记:错误处理
php alert弹出框位置 jQuery_基于jquery的弹出提示框始终处于窗口的居中位置（类似于alert弹出框的效果） 原理很简单： 获取当前屏幕（ - phpStudy...
