這篇文章主要介紹了使用jQuery制作遮罩層彈出效果的極簡實例分享,效果中背景為半透冥且不可操作,在制作頁面上傳功能等場景下十分實用,需要的朋友可以參考下
客戶的網(wǎng)站上突然需要一個遮罩彈窗效果，也可以稱作暗箱之類的，具體效果就是網(wǎng)頁中背景變成半透明，然后在屏幕中間出現(xiàn)一個菜單之類的東西。這種效果在網(wǎng)上很常見，例如：QQ空間瀏覽相冊等。這種效果的好處就是，可以讓用戶聚焦到彈出的菜單中。
神說，有代碼的文章，應(yīng)該有個 Demo ，于是就有了Demo。
HTML 結(jié)構(gòu)
首先先來分析一下這個過程：觸發(fā)某個事件（例如點擊按鈕），然后出現(xiàn)一個背景遮罩上面還有一個內(nèi)容層。觸發(fā)的按鈕，我在這里用 div 來代替，并且使用 click 點擊事件來演示。那么我們的 HTML 結(jié)構(gòu)就很明確了。
<div>點擊這里</div>
<div>效果增強版的</div>
<div></div>
<div>這里是正文內(nèi)容</div>
CSS 代碼
對于遮罩效果的 CSS 代碼是最關(guān)鍵的。遮罩用到了兩個 div ，一個作為背景，要覆蓋整個網(wǎng)頁，另一個是內(nèi)容顯示層，通常要居中處理。
.bg{display:none;position:fixed;width:100%;height:100%;background:#000;z-index:2;top:0;left:0;opacity:0.7;}
.content{display:none;width:500px;height:300px;position:fixed;top:50%;margin-top:-150px;background:#fff;z-index:3;left:50%;margin-left:-250px;}
簡單解釋一下，首先要隱藏起來，之后用 jQuery 觸發(fā)顯示。之后指定 position 的屬性為 fixed，因為這樣，才能激活 top 、left 、bottom 、right 、z-index這些屬性，同時可以設(shè)置 width 、height 為 100% 來實現(xiàn)覆蓋整個網(wǎng)頁。通常情況下，一般用 absolute 屬性值來實現(xiàn)這種效果，因為它的兼容性更好。但是在實際應(yīng)用當(dāng)中，當(dāng)頁面很長，往下滾動的時候，使用 absolute 遮罩層也會跟隨滾動。對于內(nèi)容層來說，比較簡單，指定寬度和高度用負(fù)邊距來使其居中顯示。
特別要注意一點，背景層的半透明使用的是 opacity 屬性，因為使用這個屬性可以更好的用 jQuery 來控制。但是 fixed 、opacity 都是早期 IE 瀏覽器不支持的。
jQuery 代碼
分析一下遮罩的交互操作，無非就是點擊彈出，然后點擊一下遮罩，消失。那么就直接對 CSS 進行操作即可。
$(function(){
$(‘.click').click(function(){
$(‘.bg').css({‘display':'block'});
$(‘.content').css({‘display':'block'});
});
$(‘.bg').click(function(){
$(‘.bg').css({‘display':'none'});
$(‘.content').css({‘display':'none'});
});
});
這里直接使用 CSS 方法，當(dāng)點擊的時候改變 display 屬性，此外還有很多實現(xiàn)方法，不再贅述。完成這些，當(dāng)我們點擊“點擊這里”之后，就可以看到效果了。
更多技巧和方法
更平緩的顯示：
點擊之后，突然出現(xiàn)并不是一個好方法。所以我又增加了一個按鈕，點擊之后通過 fadeIn、fadeOut 方法來控制漸隱。
$(‘.click1').click(function(){
$(‘.bg').fadeIn(200);
$(‘.content').fadeIn(400);
});
$(‘.bg').click(function(){
$(‘.bg').fadeOut(800);
$(‘.content').fadeOut(800);
});
這樣簡單的方法，就增強了用戶體驗。當(dāng)然，還有一些更高級的效果可以實現(xiàn)。