jq 弹出框 遮罩层

jq 弹出框 遮罩层

1 html

<a href="#" class="btn">点击显示弹窗</a>
    <div id="mask-kk"></div>
    <div class="popup-kk">
        <span class="close">点击关闭弹窗</span>
    </div>

2 css

#mask-kk{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 999;
            background: #666;
            opacity: 0.5;
            display: none; 
        }
        .popup-kk{
            position: absolute;
            left: 50%;
            width: 540px;
            height: 578px;
            background: #fff;
            z-index: 1000;
            display: none;
            border-radius:5px;
        }
        .close {
            position: absolute;
            top: 21px;
            right: 20px;
            cursor:pointer;
        }

3 js

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
$('.btn').click(function() {
        $('#mask-kk').css({
            display: 'block',
            height: $(document).height()
        })
        var $Popup = $('.popup-kk');
        $('.popup-kk').css({
        left: ($('body').width() - $('.popup-kk').width()) / 2+ 'px',
        top: ($(window).height() - $('.popup-kk').height()) / 2 + $(window).scrollTop() + 'px',
        display: 'block'
        })
        $("body").css({overflow:"hidden"})
    })
    $('.close').click(function() {
        $('#mask-kk,.popup-kk').css('display', 'none');
        $("body").css({overflow:""})
    })