escape关闭bootstrap响应式弹出层

本文演示了hwLayer在线打开确定框弹出层，支持手动点击或按escape键关闭弹出层。而且支持手机自适应，淡入淡出效果也不错。

分类：悬浮层/弹出层 > 弹窗难易：中级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

点击弹出层按钮

<a class="btn btn-info btn-lg show-layer" data-show-layer="hw-layer" role="button">点击弹出层</a>

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>

触发弹出层

$('.show-layer').on('click', function() {
    var layerid = $(this).data('show-layer');
    showLayer(layerid);
});

function showLayer(id) {
    var layer = $('#' + id),
            layerwrap = layer.find('.hw-layer-wrap');
    layer.fadeIn();
    //屏幕居中
    layerwrap.css({
        'margin-top': -layerwrap.outerHeight() / 2
    });
}

点击或者触控弹出层外的半透明遮罩层，关闭弹出层

$('.hw-overlay').on('click', function(event) {
    if (event.target == this) {
        hideLayer();
    }
});

按ESC键关闭弹出层

$(document).keyup(function(event) {
    if (event.keyCode == 27) {
        hideLayer();
    }
});

隐藏层淡入淡出

function hideLayer() {
    $('.hw-overlay').fadeOut();
}