客戶的網(wǎng)站上突然需要一個(gè)遮罩彈窗效果，也可以稱作暗箱之類的，具體效果就是網(wǎng)頁(yè)中背景變成半透明，然后在屏幕中間出現(xiàn)一個(gè)菜單之類的東西。這種效果在網(wǎng)上很常見(jiàn)，例如：QQ空間瀏覽相冊(cè)等。這種效果的好處就是，可以讓用戶聚焦到彈出的菜單中。

神說(shuō)，有代碼的文章，應(yīng)該有個(gè) Demo ，于是就有了Demo。

HTML 結(jié)構(gòu)

首先先來(lái)分析一下這個(gè)過(guò)程：觸發(fā)某個(gè)事件（例如點(diǎn)擊按鈕），然后出現(xiàn)一個(gè)背景遮罩上面還有一個(gè)內(nèi)容層。觸發(fā)的按鈕，我在這里用 div 來(lái)代替，并且使用 click 點(diǎn)擊事件來(lái)演示。那么我們的 HTML 結(jié)構(gòu)就很明確了。

 <div class="click">點(diǎn)擊這里</div>
 <div class="click1">效果增強(qiáng)版的</div>
 <div class="bg"></div>
 <div class="content">這里是正文內(nèi)容</div>

CSS 代碼

對(duì)于遮罩效果的 CSS 代碼是最關(guān)鍵的。遮罩用到了兩個(gè) div ，一個(gè)作為背景，要覆蓋整個(gè)網(wǎng)頁(yè)，另一個(gè)是內(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;}

簡(jiǎn)單解釋一下，首先要隱藏起來(lái)，之后用 jQuery 觸發(fā)顯示。之后指定 position 的屬性為 fixed，因?yàn)檫@樣，才能激活 top 、left 、bottom 、right 、z-index這些屬性，同時(shí)可以設(shè)置 width 、height 為 100% 來(lái)實(shí)現(xiàn)覆蓋整個(gè)網(wǎng)頁(yè)。通常情況下，一般用 absolute 屬性值來(lái)實(shí)現(xiàn)這種效果，因?yàn)樗募嫒菪愿谩５窃趯?shí)際應(yīng)用當(dāng)中，當(dāng)頁(yè)面很長(zhǎng)，往下滾動(dòng)的時(shí)候，使用 absolute 遮罩層也會(huì)跟隨滾動(dòng)。對(duì)于內(nèi)容層來(lái)說(shuō)，比較簡(jiǎn)單，指定寬度和高度用負(fù)邊距來(lái)使其居中顯示。
特別要注意一點(diǎn)，背景層的半透明使用的是 opacity 屬性，因?yàn)槭褂眠@個(gè)屬性可以更好的用 jQuery 來(lái)控制。但是 fixed 、opacity 都是早期 IE 瀏覽器不支持的。

jQuery 代碼

分析一下遮罩的交互操作，無(wú)非就是點(diǎn)擊彈出，然后點(diǎn)擊一下遮罩，消失。那么就直接對(duì) CSS 進(jìn)行操作即可。

 $(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)點(diǎn)擊的時(shí)候改變 display 屬性，此外還有很多實(shí)現(xiàn)方法，不再贅述。完成這些，當(dāng)我們點(diǎn)擊“點(diǎn)擊這里”之后，就可以看到效果了。
更多技巧和方法

更平緩的顯示：

點(diǎn)擊之后，突然出現(xiàn)并不是一個(gè)好方法。所以我又增加了一個(gè)按鈕，點(diǎn)擊之后通過(guò) fadeIn、fadeOut 方法來(lái)控制漸隱。

 $(‘.click1').click(function(){
 $(‘.bg').fadeIn(200);
 $(‘.content').fadeIn(400);
 });
 $(‘.bg').click(function(){
 $(‘.bg').fadeOut(800);
 $(‘.content').fadeOut(800);
 });

這樣簡(jiǎn)單的方法，就增強(qiáng)了用戶體驗(yàn)。當(dāng)然，還有一些更高級(jí)的效果可以實(shí)現(xiàn)。

最新評(píng)論