javascript - 如何以绝对位置居中模态弹出窗口

Question

我正在尝试在屏幕中央放置一个模式弹出窗口，但无法使其正常工作。

在小提琴中，我有一个顶部 div（横幅），其中包含另一个用于显示模式的 div（寄存器/标题）。这个子 div 绝对位于父 div 的中心，使用 (margin: auto and top/bottom/left/right: 0) 可以正常工作。但是，当我将相同的定位应用于模态（其父 div 是主体）时，弹出窗口出现在屏幕的左上角而不是中心。不知道为什么会这样。

小提琴

$(document).ready(function() {
    $('#register').click(function(e) { 
           $('#modal1').reveal({                   
            closeonbackgroundclick: true,              
            dismissmodalclass: 'close'   
        });
    return false;
    });                 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="banner">            
    <a href="#" class="header" id="register">Register</a>  
</div>
<div id="modal1" class="modal" ><p>Modal Popup</p></div>  
<div id="map"></div>

Answer 1

要将父级为主体的 div 居中，您还需要声明其宽度和高度。

.div {
bottom: 0;
height: 400px;
width:600px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;    
}