使用Jq实现弹出层

对于前端程序员来说，弹出层是经常用到的，下面我叫大家如何用实现JQuery实现弹出层的效果，代码如下：

CSS：弹出层的效果

.mask {

    position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;

    z-index: 1002; left: 0px;

    opacity:0.5; -moz-opacity:0.5;

}

.popup-kk{

    left: 50%;

    width: 1024px;

    height: 694px;

    background: #fff;

    display: none;

    border-radius:5px;

    z-index: 2000;

}

.close {

    position: fixed;

    top: 21px;

    right: 20px;

    cursor:pointer;

}

HTML：最主要的是遮挡层和弹出层，遮挡层就是把整个屏幕挡住，弹出层在遮挡层的上面；

注：弹出层的Z-index一定要比遮挡层的大，否则遮挡层就会把弹出层挡住

<p onclick="showMask()">点击</p>

<!--遮挡层-->

<div id="mask" class="mask"></div>

<!--弹出层-->

<div class="popup-kk">

　　<span class="close">x</span><!-- //关闭按钮-->

</div>

JS：通过jq改变弹出层的样式，把它改成position: 'fixed'，这样弹出层就可以浮动了

function showMask(){

    $("#mask").css("height",$(document).height());

    $("#mask").css("width",$(document).width());

    $("#mask").show();

    var $Popup = $('.popup-kk');

//$(window).height()代表了当前可见区域的的高度，

//$(window).scrollTop() 获取垂直滚动的距离 (即当前滚动的地方的窗口顶端到整个页面顶端的距离)

//                alert(($(window).height() - $Popup.height()) / 2 + $(window).scrollTop())

    console.log($(window).height()+"-"+$Popup.height())

    console.log($(window).scrollTop())

        $Popup.css({

            left: ($('body').width() - $Popup.width()) / 2+ 'px',

            top:($(window).height() - $Popup.height()) / 2+"px",

            display: 'block',

            position: 'fixed'

        })

}

$('.close').click(function() {

  $('#mask,.popup-kk').css('display', 'none');

})

以上就是就是弹出层的效果，如果大家嫌麻烦，我推荐使用layui（https://www.layui.com)；