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

<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{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;} 
} 

$(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(); 
} 
}); 
});