php 浮动窗口,jQuery实现弹出带遮罩层的居中浮动窗口效果

本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果。分享给大家供大家参考，具体如下：

pop window

*{

padding: 0;

margin: 0;

}

.hide{

display: none;

}

.popWindow{

width: 300px;

height: 300px;

background: #abcdef;

padding: 2px;

margin: 10px;

position: absolute;

left: 0;

top: 0;

z-index: 2;

}

.popWindow h3{

height: 30px;

line-height: 30px;

}

.popWindow h3 span{

float: right;

font-size: 14px;

font-weight: normal;

cursor: pointer;

}

.popWindow h3 span:hover{

color: #f00;

}

.popWindow .content{

height: 270px;

background: #fff;

}

.mask{

background: #000;

opacity: 0.4;

position: absolute;

left: 0;

top: 0;

z-index: 1;

}

显示窗口

弹出窗口的标题关闭

弹出窗口的内容

$(function(){

var oBtn = $('#show');

var popWindow = $('.popWindow');

var oClose = $('.popWindow h3 span');

//浏览器可视区域的宽度

var browserWidth = $(window).width();

//浏览器可视区域的高度

var browserHeight = $(window).height();

//浏览器纵向滚动条距离上边界的值

var browserScrollTop = $(window).scrollTop();

//浏览器横向滚动条距离左边界的值

var browserScrollLeft = $(window).scrollLeft();

//弹出窗口的宽度

var popWindowWidth = popWindow.outerWidth(true);

//弹出窗口的高度

var popWindowHeight = popWindow.outerHeight(true);

//left的值＝浏览器可视区域的宽度／2－弹出窗口的宽度／2+浏览器横向滚动条距离左边界的值

var positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft;

//top的值＝浏览器可视区域的高度／2－弹出窗口的高度／2+浏览器纵向滚动条距离上边界的值

var positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop;

var oMask = '

//遮照层的宽度

var maskWidth = $(document).width();

//遮照层的高度

var maskHeight = $(document).height();

oBtn.click(function(){

popWindow.show().animate({

'left':positionLeft+'px',

'top':positionTop+'px'

},500);

$('body').append(oMask);

$('.mask').width(maskWidth).height(maskHeight);

});

$(window).resize(function(){

if(popWindow.is(':visible')){

browserWidth = $(window).width();

browserHeight = $(window).height();

positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft;

positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop;

popWindow.animate({

'left':positionLeft+'px',

'top':positionTop+'px'

},500);

}

});

$(window).scroll(function(){

if(popWindow.is(':visible')){

browserScrollTop = $(window).scrollTop();

browserScrollLeft = $(window).scrollLeft();

positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft;

positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop;

popWindow.animate({

'left':positionLeft+'px',

'top':positionTop+'px'

},500).dequeue();

}

});

oClose.click(function(){

popWindow.hide();

$('.mask').remove();

});

});

运行效果图如下：

希望本文所述对大家jQuery程序设计有所帮助。