Question

我正在尝试在屏幕中央放置一个模态弹出窗口，但无法让它工作。

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

Fiddle

$(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;    
}

如何以绝对位置居中使用Modal Popup

1 个答案: