Модальное (всплывающее) окно — это один из наиболее часто используемых элементов современного сайта. Оно предназначено для переключения внимания посетителя или клиента на какую-либо важную информацию (объявление, уведомление, предупреждение) или для побуждения выполнения какого-либо действия со стороны посетителя сайта (заполнить форму регистрации, входа на сайт или подписки, воспользоваться формой поиска, перейти в корзину покупок, получение промо-кода).
В данной статье рассмотрим, как сделать простое модальное (всплывающее) окно при клике на ссылку.
В первую очередь для него необходимо прописать CSS-стиль. Это можно сделать двумя способами: прописать его перед закрывающим тегом </head>, либо добавить в подключённый CSS-файл.
<style> /* свойства модального окна по умолчанию */ .modal { position: fixed; /* фиксированное положение */ top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); /* цвет фона */ z-index: 1050; opacity: 0; /* по умолчанию модальное окно прозрачно */ -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; /* анимация перехода */ pointer-events: none; /* элемент невидим для событий мыши */ } /* при отображении модального окно */ .modal:target { opacity: 1; pointer-events: auto; overflow-y: auto; } /* ширина модального окна и его отступы от экрана */ .modal-dialog { position: relative; width: auto; margin: 10px; } @media (min-width: 576px) { .modal-dialog { max-width: 500px; margin: 30px auto; } } /* свойства для блока, содержащего контент модального окна */ .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: .3rem; outline: 0; } @media (min-width: 768px) { .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); box-shadow: 0 5px 15px rgba(0, 0, 0, .5); } } /* свойства для заголовка модального окна */ .modal-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 15px; border-bottom: 1px solid #eceeef; } .modal-title { margin-top: 0; margin-bottom: 0; line-height: 1.5; font-size: 1.25rem; font-weight: 500; } /* свойства для кнопки "Закрыть" */ .close { float: right; 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; } /* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */ .close:focus, .close:hover { color: #000; text-decoration: none; cursor: pointer; opacity: .75; } /* свойства для блока, содержащего основное содержимое окна */ .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>
После этого где-нибудь после открывающего тега <body> прописываем содержимое этого модального окна
<div id="openModal" class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title">Название модального окна</h3> <a href="#close" title="Close" class="close">×</a> </div> <div class="modal-body"> Это модальное окно - пример работы кода, используемого в этой статье. </div> </div> </div> </div>
Затем перед закрывающим тегом </body> пропишем такой скрипт:
<script> document.addEventListener("DOMContentLoaded", function () { var scrollbar = document.body.clientWidth - window.innerWidth + 'px'; console.log(scrollbar); document.querySelector('[href="#openModal"]').addEventListener('click', function () { document.body.style.overflow = 'hidden'; document.querySelector('#openModal').style.marginLeft = scrollbar; }); document.querySelector('[href="#close"]').addEventListener('click', function () { document.body.style.overflow = 'visible'; document.querySelector('#openModal').style.marginLeft = '0px'; }); }); </script>
И, наконец, в нужном месте на странице вставляем ссылку на открытие модального окна такого вида:
<a href="#openModal">Открыть модальное окно</a>
Готово!
Источник: скрипты, стили и код были взяты отсюда: https://itchief.ru/lessons/html-and-css/how-to-create-simple-modal-window-in-css
Поделиться ссылкой: