基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
发布时间:2016-12-30 来源:查字典编辑
摘要:原理很简单:获取当前屏幕(窗体)的宽度和高度,因为不同浏览器的窗体大小是不一样的。有了这个,可以计算出来垂直居中的坐标。但是滑动了滚动条怎么...

原理很简单:

获取当前屏幕(窗体)的宽度和高度,因为不同浏览器的窗体大小是不一样的。有了这个,可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度,加到刚刚的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" value="btn"/>

<div>弹出确认框始终位于窗口的中间位置的测试</div>

<div></div>

<div>

<p>确定要删除吗?</p>

<p><input type="button" value="确定"/>

<input type="button" value="取消"class="btn2"/></p>

</div>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类