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