简单的弹窗

第一种简单弹窗结构

by Yu Jiangshui

HTML

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

<div class="box-login">
    这里是弹窗内容
</div>

<div class="overlay"></div>

CSS

.overlay{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.8);
}
.box-login{
    display: none;
    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(){
    $('.overlay,.box-login').fadeIn(200);
});

$('.overlay').on('click',function(){
    $('.overlay,.box-login').fadeOut(200,function(){
        $(this).removeAttr('style');
    });
});