仅当滚动条位于顶部时，模态弹出窗口才会显示在中心答案

【问题标题】：Modal pop up displays at the center only when the scrollbar is at the top仅当滚动条位于顶部时，模态弹出窗口才会显示在中心
【发布时间】：2015-05-22 02:27:55
【问题描述】：

我使用的是模态弹窗，无论滚动条是在顶部还是底部，它都不会显示在中心。我总是希望它在中心呈现，以便用户无需滚动即可看到该模式弹出。以下是我正在使用的代码：

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>

【问题讨论】：

你的 html 中的结束表单标签是什么？
改变位置：解决了我的问题。
代码格式使问题更易于阅读。另一个改进是删除任何不相关的代码。

标签： javascript php jquery html css

【解决方案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%；

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

【讨论】：

【解决方案2】：

选项 #1 使用 % 进行垂直对齐。

选项 #2

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Demo

【讨论】：