使用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)；

转载于:https://www.cnblogs.com/bushui/p/10446595.html