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:""}) })