javascript - 仅当滚动条位于顶部时，模态弹出才会显示在中心

Question

我正在使用模态弹出窗口，无论滚动条是在顶部还是底部，它都不会显示在中心。我总是希望它在中心呈现，这样用户就不需要滚动来查看弹出的模式。以下是我正在使用的代码:

CSS:

table {
    border-collapse:separate;
    border-spacing:0pt;
}

caption, th, td {
    font-weight:normal;
    text-align:left;
}

blockquote:before, blockquote:after, q:before, q:after {
    content:"";
}

blockquote, q {
    quotes:"" "";
}

a {
    cursor: pointer;
    text-decoration:none;
}

br.both {
    clear:both;
}

#backgroundPopup {
    display:none;
    position:fixed;
    _position:absolute; /* hack for internet explorer 6*/
    height:100%;
    width:100%;
    top:0;
    left:0;
    background:#000000;
    border:1px solid #cecece;
    z-index:1;
}

#popupContact {
    display:none;
    position:fixed;
    _position:absolute; /* hack for internet explorer 6*/
    height:384px;
    width:408px;
    background:#FFFFFF;
    border:2px solid #cecece;
    z-index:2;
    padding:12px;
    font-size:13px;
}

#popupContact h1 {
    text-align:left;
    color:#6FA5FD;
    font-size:22px;
    font-weight:700;
    border-bottom:1px dotted #D3D3D3;
    padding-bottom:2px;
    margin-bottom:20px;
}

#popupContactClose {
    font-size:14px;
    line-height:14px;
    right:6px;
    top:4px;
    position:absolute;
    color:#6fa5fd;
    font-weight:700;
    display:block;
}

#button {
    text-align:center;
    margin:100px;
}

JavaScript:

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact").fadeIn("slow");
        popupStatus = 1;
    }
}

//disabling popup with jQuery magic!
function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact").fadeOut("slow");
        popupStatus = 0;
    }
}

//centering popup
function centerPopup(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    //centering
    $("#popupContact").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6

    $("#backgroundPopup").css({
        "height": windowHeight
    });

}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

    //LOADING POPUP
    //Click the button event!


    $(document.body).on('click', '.flag_icons' ,function(e){
    //$('.flag_icon').click(function(){
        //centering with css
        centerPopup();
        //load popup
        loadPopup();
    });

    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose").click(function(){
        disablePopup();
    });
    //Click out event!
    $("#backgroundPopup").click(function(){
        disablePopup();
    });
    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
        }
    });
});

HTML:

<div id="popupContact">
        <a id="popupContactClose">x</a>
        <h1> Modal Popup Rendered </h1>
        <p id="contactArea">
         </form>
        </p>
</div>
<div id="backgroundPopup"></div>

Answer 1

代替 top:0 left:0 使用:

#backgroundPopup{
display:none;
position:fixed;
height:100%;
width:100%;
top:50%;
left:50%;
background:#000000;
border:1px solid #cecece;
z-index:1;
}

顶部:50%；左:50%；

无论如何都将元素保持在页面的中心。