在项目中，经常会用到一种效果就是，点击网页中某个元素时，可以弹出一个图层，这个图层无论是否有滚动条，还是滚动条是否滚动都要保持在当前窗口的正中央，同时在这个窗口的下面有一个遮罩层，使用户不能点击这个元素下面的元素。
具体代码如下：
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(); } } }); });
