在项目中,经常会用到一种效果就是,点击网页中某个元素时,可以弹出一个图层,这个图层无论是否有滚动条,还是滚动条是否滚动都要保持在当前窗口的正中央,同时在这个窗口的下面有一个遮罩层,使用户不能点击这个元素下面的元素。
具体代码如下:
css如下:
<style type="text/css">
#btn1{
position:fixed;
right:0;
bottom:0;
}
#div1{
width:300px;
height:100px;
background-color:red;
position:absolute;
display:none;
left:0;
top:0;
z-index:2;
}
#mask{
display:none;
position:absolute;
background-color:black;
filter:alpha(opactiy=20);
opacity:0.2;
z-index:1;
}
</style>
HTML代码如下:
<body style="height:2000px; width:3000px;">
<input type="button" value="弹出" id="btn1" />
<div id="div1"><input type="button" value="关闭" id="close" /></div>
<div id="mask"></div>
</body>
js代码如下:
$(function () {
var $win = $(window),
$div = $('#div1'),
$mask = $('#mask'),
$close = $('#close'),
flag = false;
$('#btn1').click(function () {
var clientH = $win.height(),
clientW = $win.width(),
divH = $div.height(),
divW = $div.width();
var t = (clientH - divH) / 2 + $win.scrollTop();
var l = (clientW - divW) / 2 + $win.scrollLeft();
$div.css('display', 'block').offset({ 'top': t, 'left': l });
$mask.show().css({ width: clientW + 'px', height: clientH + 'px' }).offset({ left: $win.scrollLeft(), top: $win.scrollTop() });
flag = true;
$close.click(function () {
flag = false;
$div.hide();
$mask.hide();
});
$(window).scroll(setMask).resize(setMask);
function setMask() {
if (flag) {
$div.css('display', 'block').offset({ 'top': ($win.height() - $div.height()) / 2 + $win.scrollTop(), 'left': ($win.width() - $div.width()) / 2 + $win.scrollLeft() });
$mask.show().css({ width: clientW + 'px', height: clientH + 'px' }).offset({ left: $win.scrollLeft(), top: $win.scrollTop() });
} else {
$div.hide();
$mask.hide();
}
}
});
});