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

<p onclick="showMask()">點擊</p>
<!--遮擋層-->
<div id="mask" class="mask"></div>  
<!--彈出層-->
          
<div class="popup-kk">
 

　　<span class="close">x</span><!-- //關閉按鈕-->
</div>

JS

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‘);
})

使用jq實現彈出層