一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jquery实现弹窗功能(窗口居中显示)

时间:2017-05-05 编辑:简简单单 来源:一聚教程网

效果图:

代码如下:

 

 代码如下 复制代码

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

.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();

}

});

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

确定要删除吗?

 

热门栏目