HTML5+CSS3+jQuery實現彈出層

文章來源於helloweba.comjavascript

咱們徹底使用HTML5+CSS3+jQuery來實現一個基本的彈出層效果,所以咱們能夠在示例中任意修改彈出層外觀樣式、甚至js方法調用。咱們最終作出來的彈出層效果應該是響應式的,也就是說能夠在桌面PC端和移動端均可以很好展現的彈出層,而且是兼容現代瀏覽器的。在demo中,我使用了Bootstrap樣式,固然你也能夠本身寫個樣式來完成頁面佈局。 一個基本的彈出層應該知足如下需求:css

  • 點擊按鈕/連接觸發彈出層,彈出層應該有半透明的遮罩層;
  • 點擊彈出層的關閉按鈕、取消按鈕或者遮罩層會關閉隱藏彈出層;
  • 使用Esc鍵也能夠關閉彈出層;
  • 它是響應式的,而且兼容現代主流瀏覽器。

HTML

首先咱們在頁面放置一個用來觸發彈出層的連接,也能夠是個按鈕button,注意的是咱們給它設置一個data-show-layer屬性,這個屬性值對應的就是彈出層的id,也就是說經過data-show-layer來關聯彈出層。html

<a class="btn btn-info btn-lg show-layer" data-show-layer="hw-layer" role="button">點擊彈出層</a>

很顯然,上面的連接關聯的彈出層的id是hw-layer。那好,選擇咱們來準備彈出層hw-layer的html代碼。java

<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+Js實現的響應式彈出層效果(兼容PC和mobile)。</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字體圖標。其實最關鍵的就是須要遮罩層和主體層,內容能夠根據項目需求自定義,由於它多是個表單、也多是個純文字說明的內容。web

CSS

CSS也是關鍵的部分,咱們先設置遮罩層,它默認狀況下應該是不可見的,位置上fixed固定的,而且是覆蓋整個頁面的,它仍是半透明的,咱們這裏設置了背景黑色、透明度0.3,如background-color: rgba(0,0,0,0.3)。而後主體層.hw-layer-wrap,咱們設置它的寬度,計算它的位置。寬度咱們能夠預設一個值,高度因爲內容多少不肯定,這裏咱們不用設置一個具體的值,在後面的js部分會對高度處理,而後設置居中以及邊框陰影等效果。有關水平和垂直居中的設置能夠參閱Helloweba文章:如何讓DIV水平和垂直居中。彈出層裏面的內容樣式能夠自由設置,最後就是使用media query來設置小屏幕下的彈出層居中的問題。bootstrap

.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插件,以插件的形式來調用,知足各類不一樣彈出層效果的需求,敬請關注。app

相關文章
相關標籤/搜索