HTML5+CSS3+jQuery实现弹出层

文章来源于helloweba.com

咱们彻底使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果，所以咱们能够在示例中任意修改弹出层外观样式、甚至js方法调用。咱们最终作出来的弹出层效果应该是响应式的，也就是说能够在桌面PC端和移动端均可以很好展现的弹出层，而且是兼容现代浏览器的。在demo中，我使用了Bootstrap样式，固然你也能够本身写个样式来完成页面布局。 一个基本的弹出层应该知足如下需求：

• 点击按钮/连接触发弹出层，弹出层应该有半透明的遮罩层；
• 点击弹出层的关闭按钮、取消按钮或者遮罩层会关闭隐藏弹出层；
• 使用Esc键也能够关闭弹出层；
• 它是响应式的，而且兼容现代主流浏览器。

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+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字体图标。其实最关键的就是须要遮罩层和主体层，内容能够根据项目需求自定义，由于它多是个表单、也多是个纯文字说明的内容。

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插件，以插件的形式来调用，知足各类不一样弹出层效果的需求，敬请关注。