彈出層用來向用戶展示詳細的信息，交互性非常強。彈出層有對話框、模態窗口等形式，這里我都把他們叫做彈出層，我的同事們也是這么叫的。一般我們喜歡使用比較成熟的彈出層插件如fancybox等，但在本文，我將先拋棄插件，給大家介紹如何使用jQuery+CSS3+Html5實現彈出層。
我們完全使用HTML5+CSS3+jQuery來實現一個基本的彈出層效果，因此我們可以在示例中任意修改彈出層外觀樣式、甚至js方法調用。我們最終做出來的彈出層效果應該是響應式的，也就是說可以在桌面PC端和移動端都可以很好展示的彈出層，并且是兼容現代瀏覽器的。在demo中，我使用了Bootstrap樣式，當然你也可以自己寫個樣式來完成頁面布局。
一個基本的彈出層應該滿足以下需求：
1、點擊按鈕/鏈接觸發彈出層，彈出層應該有半透明的遮罩層；
2、點擊彈出層的關閉按鈕、取消按鈕或者遮罩層會關閉隱藏彈出層；
3、使用Esc鍵也可以關閉彈出層；
4、它是響應式的，并且兼容現代主流瀏覽器。
HTML
首先我們在頁面放置一個用來觸發彈出層的鏈接，也可以是個按鈕button，注意的是我們給它設置一個data-show-layer屬性，這個屬性值對應的就是彈出層的id，也就是說通過data-show-layer來關聯彈出層。
<a class="btn btn-info btn-lg show-layer" data-show-layer="hw-layer" role="button">點擊彈出層</a>
很顯然，上面的鏈接關聯的彈出層的id是hw-layer。那好，選擇我們來準備彈出層hw-layer的html代碼。
<div class="hw-overlay" id="hw-layer"> <div class="hw-layer-wrap"> <span class="glyphicon glyphicon-remove hwLayer-close"></span> <div class="row"> <div class="col-md-3 col-sm-12 hw-icon"> <i class="glyphicon glyphicon-info-sign"></i> </div> <div class="col-md-9 col-sm-12"> <h4>你確定嗎？</h4> <p>這是HTML+CSS+Javascript實現的一個彈出層效果，它是響應式的，它可以在所有現代瀏覽器上工作（包括PC和移動端）。</p> <button class="btn btn-success hwLayer-ok">確 定</button> <button class="btn btn-warning hwLayer-cancel">取 消</button> </div> </div> </div> </div>
我們彈出層的最外層，也就是遮罩層.hw-overlay，我們會使用CSS控制它是一個半透明的層，用來隔開彈出層和頁面主體內容。r然后在.hw-layer-wrap主體層內，我們可以設置彈出層的內容，當然內容由你來定，我們本文結合實例彈出層的內容是一個確認對話框，類似window的confirm()。內容使用了bootstrap的col-*柵格布局，還用了glyphicon字體圖標。其實最關鍵的就是需要遮罩層和主體層，內容可以根據項目需求自定義，因為它可能是個表單、也可能是個純文字說明的內容。
CSS
CSS也是關鍵的部分，我們先設置遮罩層，它默認情況下應該是不可見的，位置上fixed固定的，并且是覆蓋整個頁面的，它還是半透明的，我們這里設置了背景黑色、透明度0.3，如background-color: rgba(0,0,0,0.3)。然后主體層.hw-layer-wrap，我們設置它的寬度，計算它的位置。寬度我們可以預設一個值，高度由于內容多少不確定，這里我們不用設置一個具體的值，在后面的js部分會對高度處理，然后設置居中以及邊框陰影等效果。有關水平和垂直居中的設置可以參閱Helloweba文章：如何讓DIV水平和垂直居中。彈出層里面的內容樣式可以自由設置，最后就是使用media query來設置小屏幕下的彈出層居中的問題。
.hw-overlay{display:none; position: fixed; top:0;left:0;width:100%;height:100%; background-color: rgba(0,0,0,0.3);z-index:10;} .hw-layer-wrap{box-sizing:border-box; width:570px; position:absolute;left:50%;top:50%; margin-left:-285px; border-radius:3px; background-color:#fff; box-shadow:1px 2px 4px 0 rgba(0,0,0,0.12); padding:45px 50px;} .hwLayer-close{position:absolute; right:20px; top:20px; width:20px; height:20px; cursor:pointer; font-size:20px; color:#ccc;} .hw-layer-wrap .hw-icon{color:#b4d8f3;font-size:86px;text-align:center;} .hw-layer-wrap h4{margin:5px 0 30px; font-size:24px; color:#383c3e;} .hw-layer-wrap p{margin:30px 0; line-height:22px; color:#595d60; text-align:left;} @media (max-width:768px){ .hw-layer-wrap{width:350px; margin-left:-175px; margin-top:-200px; padding:45px 50px; text-align:center;} } @media (max-width:400px){ .hw-layer-wrap{width:250px; margin-left:-125px;padding:25px 30px;} } Javascript
我們使用jQuery來處理觸發彈出層和關閉彈出層效果，應此需要預先加載jQuery庫。showLayer(id)是一個自定義的函數，用來展示彈出層。當點擊按鈕或鏈接調用這個showLayer(id)函數，它會漸現的效果展示，并且計算彈出層的高度位移距離，使得彈出主體層水平和垂直方向的居中。而函數hideLayer()就是隱藏彈出層，fadeOut()或者hide()就能實現。最后再加上觸發遮罩層的時候關閉彈出層以及使用Esc按鈕的時候關閉彈出層的代碼。
$(function(){ //展示層 function showLayer(id){ var layer = $('#'+id), layerwrap = layer.find('.hw-layer-wrap'); layer.fadeIn(); //屏幕居中 layerwrap.css({ 'margin-top': -layerwrap.outerHeight()/2 }); } //隱藏層 function hideLayer(){ $('.hw-overlay').fadeOut(); } $('.hwLayer-ok,.hwLayer-cancel,.hwLayer-close').on('click', function() { hideLayer(); }); //觸發彈出層 $('.show-layer').on('click', function() { var layerid = $(this).data('show-layer'); showLayer(layerid); }); //點擊或者觸控彈出層外的半透明遮罩層，關閉彈出層 $('.hw-overlay').on('click', function(event) { if (event.target == this){ hideLayer(); } }); //按ESC鍵關閉彈出層 $(document).keyup(function(event) { if (event.keyCode == 27) { hideLayer(); } }); }); 其實到這里，一個基本的彈出層效果已經做好了。我們這里只是做一個基本的彈出層，你也可以進行繼續擴展代碼。我們看過很多彈出層插件，很多都是動態直接操作DOM的，也就是通過js代碼先createElement，然后在將內容append到body里的，這種方式如果是頻繁操作DOM的話會消耗一定的性能，所以從性能角度考慮的話，我推薦使用本文提供的彈出層方式。
好了，接下來我們將彈出層的代碼封裝成一個簡單的jQuery插件，以插件的形式來調用，滿足各種不同彈出層效果的需求，敬請關注。
新聞熱點
疑難解答
