精美而实用的网站,关注web编程技术与网站SEO推广,追求极致,让您轻松愉快的学习

jquery实现网页弹窗,弹窗自动居中这个好说,但是当页面出现滚动条或页面缩放的时候,点击按钮弹出依然居中怎么实现呢?下面青岛星网的解决方法。

jquery页面弹出框居中原理

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

jquery页面弹出框居中最重要的代码

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可以根据需要修改

jquery页面弹出框居中范例代码

<html>   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
<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>
Tags:jquery 弹出框
如果本文帮到了您,请分享到朋友圈或推荐给好友!

网络编程 - 分类栏目