Содержание страницы
домикГлавная / Элементы html и css / Как сделать модальное окно на css
Модальное окноМодальное, либо всплывающее окно (называют по-разному) – это очень распространённый элемент html применяемый на веб-сайте. Основное его назначение это вывод различной информации (в основном текстовой и при наличие нескольких картинок), которая появляется при нажатие на какой-либо специальный объект (ссылка, кнопка или фото).

В модальное окно, в большинстве случаев для экономии места на сайте, прописывают не особо важную информацию, например как: обратная связь, авторизация, либо регистрация на сайте.
Бывают случаи, когда веб-мастера желают привлечь внимание посетителя каким-то важным событием, к примеру: для получения бонусов и подарков, участие в акциях и розыгрышах, и т.п., и модальные окна всплывают без участия и желания посетителя.

Кто-то делает для этих целей модальное окно при открытии страницы, которое появляется на странице через определенный промежуток времени используя разумеется java скрипт, а другой хочет разными способами оставить посетителя на своём сайте и использует модальное окно при закрытии страницы, которое всплывает в тот момент, когда клиент хочет уже покинуть и закрыть страницу.

Первый пример всплывающего модального окна.

Открыть модальное окно


Для того, чтобы сделать модальное окно применяя только css, необходимо прописать html код для ссылающего объекта на всплывающее окно и в стилевом файле назначить параметры и свойства для правильного отображения красивого модального окна.
html и cssCOPY
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <style type="text/css"> .my_modal{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.5);z-index:1050;display:none;margin:0;padding:0;}.my_modal:target{display:block;overflow-y:auto;}.my_modal-dialog{position:relative;width:auto;margin:10px;}@media (min-width:576px){.my_modal-dialog{max-width:460px;margin:30px auto;}}.my_modal-content{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;}@media (min-width:768px){.my_modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5);}}.my_modal-header{display:block;padding:14px 14px 4px;}.my_modal-title{margin-top:0;margin-bottom:0;line-height:1.5;font-size:1.25rem;font-weight:500;border-bottom:1px solid #d4d4d4;}.close{padding:1px 5px 0;border:1px solid #000;border-radius:50%;font-family:sans-serif;font-size:24px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5;text-decoration:none;top:4px;right:4px;position:absolute;}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.75;}.my_modal-body{position:relative;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:15px;overflow:auto;} </style> </head> <body> <a href="#modal_open">Открыть модальное окно</a> <div id="modal_open" class="my_modal"> <div class="my_modal-dialog"> <div class="my_modal-content"> <div class="my_modal-header"> <p class="my_modal-title">Заголовок модального окна</p> <a href="#" title="Закрыть модальное окно" class="close">×</a> </div> <div class="my_modal-body"> <p>Здесь прописана текстовая информация модального окна ...</p> </div> </div> </div> </div> </body> </html>
Скопируйте, вставьте и сохраните вышеуказанный код в текстовый документ под именем index.html и после откройте его в браузере для проверки работоспособности модального окна. Здесь же вы можете и подкорректировать внешний вид модального окна исходя из дизайна вашего проекта.

Я к примеру, для вывода определённой информации частенько использую модальное окно в качестве алерт сообщение с различными анимационными эффектами, что смотрится куда-более интересным.
В этом примере я покажу как прописать кнопку для открытия модального окна.
Для этого нам нужно лишь добавить в коде для кнопки и для блока модального окна атрибут HTML onclick и тем самым вызвать функцию с определённым именем.

Здесь же я добавил для модального окна в стилевом оформление плавное появление и закрытие окна, изменив вместо обычного display на параметры: visible и opacity.

Пример кнопки для вызова модального окна ( нажмите ).

Модальное окно кнопка


Далее, пропишите свойства и значения для модального окна:
cssCOPY
<style type="text/css"> #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 999; overflow: auto; visibility:hidden; opacity: 0; transition: opacity 0.7s ease-in 0s; } .popup { top: 10%; left: 0; right: 0; font-size: 14px; margin: auto; width: 80%; min-width: 200px; max-width: 600px; position: absolute; padding: 15px 20px; border: 1px solid #666; background-color: #fefefe; z-index: 1000; border-radius: 10px; font: 14px/18px 'Tahoma', Arial, sans-serif; box-shadow: 0 0px 14px rgba(0, 0, 0, 0.4); } .close { top: 10px; right: 10px; width: 32px; height: 32px; position: absolute; border: none; border-radius: 50%; background-color: rgba(0, 130, 230, 0.9); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); cursor: pointer; outline: none; } .close:before { color: rgba(255, 255, 255, 0.9); content: "X"; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; text-decoration: none; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); } .close:hover { background-color: rgba(180, 20, 14, 0.8); } #overlay .popup p.zag{margin:20px 0 10px;padding:0 0 6px;color:tomato;font-size:16px;font-weight:bold;border-bottom:1px solid tomato;} </style>
Потом скопируйте и вставьте html код модального окна:
htmlCOPY
<div id="overlay"> <div class="popup"> <button class="close" title="Закрыть окно" onclick="swa2()"></button> <p class="zag">Модальное окно</p> <p>Первая текстовая информация ...</p> <p>Вторая текстовая информация ...</p> <p>Последующая текстовая информация ...</p> </div> </div>
Далее, разместите в желаемое место страницы код кнопки при нажатии которой откроется модальное окно:
htmlCOPY
<button onclick="swa()" type="button">Модальное окно</button>
И последнее, пропишите перед </body> скрипт для вызова и закрытия модального окна:
htmlCOPY
<script> var b = document.getElementById('overlay'); function swa(){ b.style.visibility = 'visible'; b.style.opacity = '1'; b.style.transition = 'all 0.7s ease-out 0s'; } function swa2(){ b.style.visibility = 'hidden'; b.style.opacity = '0'; } </script>
Делитесь с друзьями и задавайте вопросы, если что-то не получается при создание модального окна.
Дата публикации: 19.08.2018
Комментарии
Монограмм
06 сентября 2019 12:38
Монограмм
Спасибо мужик, в который раз выручает твой блог!
На этот раз модальное окно то, что нужно и без проблем всплывет как надо.
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!

Модальное окно

Размер модального окна прописан в процентах и отображается корректно при просмотре на экранах различных пользовательских устройств, с применением фона затемнения.

В модальное окно можно вставить без проблем любимые картинки, необходимый видео контент и различные формы.

Простейшая анимация появления с помощью изменения свойства прозрачности (opacity) от 0 к 1