简单的弹窗2

第二种弹窗结构

by Yu Jiangshui

HTML

<a class="js-open-box" href="#">显示弹窗</a>

<div class="overlay box-login">
    <div class="section">
        弹窗内容
    </div>
</div>

CSS

.overlay{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.8);
}
.box-login .section{
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 200px;
    height: 100px;
    background: #fff;
    z-index: 10;
}

JavaScript

$('.js-open-box').on('click',function(){
    $('.box-login').fadeIn(200);
});

//如果需要点击 overlay 关闭弹窗的话，注意阻止事件冒泡
$('.box-login .section').on('click',function(e){
    e.stopPropagation();
});
$('.overlay').on('click',function(){
    $('.overlay').fadeOut(200,function(){
        $(this).removeAttr('style');
    });
});