Как центрировать модальное всплывающее окно с абсолютной позицией

Я пытаюсь разместить модальное всплывающее окно в центре экрана, но не могу заставить его работать.

В Fiddle у меня есть верхний div (баннер), который содержит другой div (регистр/заголовок), который я использую для отображения модального окна. Этот дочерний div абсолютно расположен в центре родительского div, используя (margin: auto и 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>


javascript css ajax modalpopup
person user3716388    schedule 18.06.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Чтобы центрировать div, родителем которого является тело, вам также необходимо объявить его ширину и высоту.

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