X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-11-05
  • 11491 переглядів

  • Дизайн та розробка сайту

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

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

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

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

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

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

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 9, в среднем: 4.6 из 5
Читайте також

Deprecated: Функція WP_Query викликана з аргументом, який вважається застарілим з версії 3.1.0! Вираз caller_get_posts застарілий. Використовуйте ignore_sticky_posts. in /var/www/vhosts/gnatkovsky.com.ua/gnatkovsky.com.ua/public/wp-includes/functions.php on line 6078