Суть способа в том, чтобы использовать свойство 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 - кнопка закрытия окна. Тут все параметры зависят от того, какой Вы хотите ее видеть. Творите с ней что угодно.
Вот и все выравнивание окна по центру страницы. На сегодняшний день, этот способ мне нравится больше всего и ни разу меня не подводил. Надеюсь он не подведет и Вас, используйте и радуйтесь.
На этом все, спасибо за внимание. 🙂
