jquery - 弹出 div 以保持在可见屏幕的中心

Question

<style>
.black_overlay{
    display: none;
    position:fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    }
    .white_content {
    display: none;
    position: fixed;
    top: 25%;
    left: 25%;
    width: 562px;
    height: 380px;
    background-color: white;
    z-index:1002;
    overflow: hidden;
    }
</style>

我试图在单击链接时在当前可见屏幕的中间弹出 div“white_content”。即使 div 会留在滚动条上，我也希望它出现在中央可见屏幕上。黑色覆盖层只是使背景变灰。

Answer 1

要使弹出窗口居中，将其定位在距顶部和左侧 50% 的位置，然后用边距减去弹出窗口大小的一半

.white_content {
    display  : none;
    position : fixed;
    top      : 50%;
    left     : 50%;
    width    : 562px;
    height   : 380px;
    margin   : -190px 0 0 -281px;
    z-index  : 1002;
    overflow : hidden;
    background-color: white;
}

FIDDLE