Question

我的弹出窗口有问题。当页面高度垂直增加时，弹出div也会垂直向下移动。我有两个div。一个是黑色透明层的毯子，另一个是覆盖在它上面的弹出窗口。

CSS：

#blanket {
    background-color: #111;
    opacity: 0.65;
    position: absolute;
    z-index: 9001;
 /*above nine thousand*/
    top: 0px;
    left: 0px;
    width: 100%;
}

#validationPopup {
    position: fixed;
    background-color: #eeeeee;
    border: 5px solid #68ad0e;
    width: 300px;
    height: 125px;
    margin-top: -150px;
    margin-left: auto;
    margin-right: auto;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    -moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    -webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    z-index: 9002;
 /*above nine thousand*/;
}

HTML：

<div id="blanket" style="display:none;"></div>
<div id="validationPopup" style="display:none;">
    </br>
    <a href="javascript:void(0)" style="text-decoration:none;color:#060;" onclick="popup('validationPopup')">
        <div align="right">close[X]&nbsp;&nbsp;&nbsp;</div>
    </a>
    <br>
    <div id="validationMessage" align="center"></div>
</div>

即使页面高度动态增加，我也希望弹出窗口位于窗口中间。

修改1 ：我尝试了position: absolute，但它仍无效。

**I also want the Div to be populated in center of the browser (not center to the total height)**

Answer 1

将left和top都设置为50%，并添加弹出窗口大小一半的减去边距：

#validationPopup {
    position: fixed;
    background-color:#eeeeee;
    border:5px solid #68ad0e;
    width:300px;
    height:125px;
    margin-top:-62px;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    -moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    -webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
    z-index: 9002;
}

背景需要height:100%：

#blanket {
    /* ... */
    height: 100%;
}

Fiddle

当页面高度动态增加时，Absolute Div向下移动

1 个答案: