Как выравнять модальное окно по центру

Віталий

8 років ago

Доброго времени суток 🙂

В этой статье хочу поделится с Вами способом, которым я очень часто пользуюсь. С помощью него, Вы сможете выровнять всплывающее окошко по центру экрана. Главное преимущество данного способа в том, что Вам абсолютно не важна ширина и высота модального окна. Это очень удобно, когда у Вас адаптивная верстка или не задается четкая высота окна. Многие мастера с легкостью Выравнивают окно по горизонтали, но вот по вертикали, чаще всего применяется или точный отступ от верхней / нижней части экрана или в процентах.

Суть способа в том, чтобы использовать свойство vertical-align. Если точнее, то ему нужно задать параметр - middle, который поможет нашим элементам окна центрироваться по-вертикали друг относительно друга. Пример того что у нас получится, можно посмотреть ниже:

Все очень просто и делается с помощью HTML + CSS. Для начала нужно добавить HTML код нашего окна. Тут все просто, как обычно.

<div id="modal_cinw_ctnr">
<div class="modal_cinw">
<span class="modal_close" onclick="document.getElementById('modal_cinw_ctnr').style.display='none'; return false;">X</span>
<h2>Содержание окна</h2>
</div>
</div>

Наше окно состоит из основного контейнера, который растянется на весь экран и будет иметь полупрозрачный фон - modal_cinw_ctnr. Ну и блок, что является самим окном - modal_cinw. Внутри окна имеется кнопка для закрытия модального окна. Ей прописано событие - onclick, которое и совершает закрытие. Внутри него выполняется поиск элемента с айди - modal_cinw_ctnr и добавления ему свойства display:none.

Теперь зададим стили, которые и совершат всю работу по центрированию окна на странице.

#modal_cinw_ctnr{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
text-align: center;
z-index:9999;
}

#modal_cinw_ctnr::after {
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
content: '';
}

.modal_cinw{
padding:10px;
display: inline-block;
vertical-align: middle;
position:relative;
text-align: left;
background: #fff;    
}

.modal_close{
position:absolute;
top:0;
right:0;
cursor:pointer;
}
.modal_close:hover{
background:#000;
color:#fff;}

Рассмотрим основные параметры, что влияют на правильное отображение окна по порядку:

#modal_cinw_ctnr - наш контейнер. Ему задается фиксированное позиционирование, высота и ширина в - 100%. Так же з выравниваем текст по центру с помощью - text-align. Чтобы окно было поверх всех элементов на сайте, нужно задать параметр - z-index, чем больше, тем лучше.
#modal_cinw_ctnr::after - добавляем псевдоэлемент, чтобы наше окно смогло выровняться вертикально по центру, чтобы сработало свойство - vertical-align. Все параметры являются обязательными, удалять никакой нельзя! Псевдоэлементу прописываются параметр display со свойством - inline-block, ну и как писал уже не раз, выравнивание по вертикали с помощью - vertical-align: middle.
.modal_cinw - наше модальное окно. Тут три основных параметра - display:inline-block; vertical-align:middle; position:relative; Остальные по желанию, но тоже желательные.
modal_close - кнопка закрытия окна. Тут все параметры зависят от того, какой Вы хотите ее видеть. Творите с ней что угодно.

Вот и все выравнивание окна по центру страницы. На сегодняшний день, этот способ мне нравится больше всего и ни разу меня не подводил. Надеюсь он не подведет и Вас, используйте и радуйтесь.

На этом все, спасибо за внимание. 🙂

Exit mobile version