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