Как сделать модальное окно на сайте
Привет друзья, в этому году меня несколько раз просили объяснить, как сделать модальное окно на сайте. Кто-то, изучая азы веб-разработки неизбежно приходил к ситуации, когда часть контент необходимо отобразить в модальном окне, кто-то, работая с формами, хочет показать ее не в открытом виде, а в pop-up при клике на кнопку.
Несмотря на то, что на блоге уже были статьи, косвенно связанные с реализацией этого эффекта, вопросы все равно остаются и я решил сделать несколько статей, связанных с этой темой. Сегодня разберемся просто с модальными окнами, а в следующий раз сделаем пульсирующую кнопку в углу экрана, как у сервисов обратного звонка и еще просили урок с анимацией блика на кнопке.
Все это выйдет друг за другом. Конечно, это статьи, ориентированные на новичков, и мастодонтам они будут не очень интересны, но тем, кто использует блог как справочник, возможно, пригодятся эти наработки, чтобы быстро реализовывать тот или иной эффект, не описывая одно и тоже каждый раз в новом проекте и сэкономят немного времени. Приступим.
Чтобы статья получилась максимально полной, будем придерживаться следующего плана и сделаем:
- модальное окно с использованием jQuery.
- Простое модальное окно с использованием чистого js.
Конечно же я покажу как вызывать несколько модальных окно на станице, так как это тоже один из частых вопросов, возникающих у новичков. Разберем возможность закрытия окна при клике вне области контента, решим проблему вертикальной прокрути и другие нюансы, которые возникнут в ходе работы или о которых сообщите вы в комментариях.
Структура проекта для понимания какие файлы и где находятся.
Начнем с разметки. Для создания модального окна я обычно пользуюсь такой структурой.
Где «modal» — это затемненный фон, а «modal__content» — область контента. При этом, когда срабатывает триггер, вызывающий окно, например нажатие кнопки, то к «modal» добавляется класс «modal_active», который дает понять, что модальное окно находится в открытом состоянии. Добавляя или удаляя «modal_active» мы будем открывать или скрывать модальное окно манипулирую стилями.
Большинству читающих нужна будет форма в модальном окне. Можно использовать эту.
Я, для примера, просто выведу текст:
Создал простейшую шапку сайта с кнопкой обратного звонка, которая должна вызвать модальное окно. Классический пример любого лендинга.
Давайте добавим немного стилей и приведем в порядок открытое состояние модалки. Вот, что получилось у меня.
Обратите внимание, что в правом углу контентной области модального окна появилась кнопка с изображением крестика. Файл лежит в папке «img», рядом с папкой «js» и «css».
.modal < position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; background: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: flex-start; overflow-y: scroll; padding: 60px 15px; >.modal__content < width: 100%; max-width: 500px; padding: 50px; background: #f9f9f9; border-radius: 3px; position: relative; box-shadow: 0 5px 15px black; >.modal__close-button < background: #ff0000; height: 30px; width: 30px; display: flex; justify-content: center; align-items: center; border: none; position: absolute; right: 0; top: 0; background: none; cursor: pointer; transition: .3s; outline: none; >.modal__close-button:hover < transition: .3s; transform: rotate(180deg); >.modal__title < font-size: 1.8rem; text-transform: uppercase; margin: 0 0 15px; >.modal__description
Тут нас больше всего интересует класс «.modal». Как я и говорил, это само модальное окно с полупрозрачным фоном. Давайте подробнее разберем что там за стили.
Первым делом «вырвем» из потока блок с модальным окном при помощи фиксированного позиционирования. Затем, при помощи свойств «top», «left», «right», «bottom» растянем модальное окно по ширине на весь экран. Z-index — нужен для того, чтобы расположить окно над всеми элементами. Если у кого-то другого элемента значение этого свойства будет выше, то модальное окно не перекроет его.
position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000;
Далее задаю цвет фона модального окна.
Цвет задаю в RGBA формате. Первые 3 цифры — это цвет, а последняя — прозрачность. Где «.9» — это прозрачность в 90%.
Далее использую flexbox для центрирования элемента «modal__content» внутри «modal», задаю возможность вертикальной прокрутки и внутренние отступы.
display: flex; justify-content: center; align-items: flex-start; overflow-y: scroll; padding: 60px 15px;
Окно прекрасно смотрится, но есть одно «но!». Помните я говорил, что активное состояния модального окна, это когда у нас есть класс «modal_active», а без этого класса, окно закрыто? Сейчас мы доведем до ума эту концепцию. Суть в том, чтобы при «modal» сделать окно скрытым, а при «modal_active» — показать.
Давайте создадим этот класс в стилях и настроим отображение окна только при его наличии.
Для показа/скрытия окна будем пользоваться «visibility», «opacity», «position» и свойство «transition» для плавности анимации появления.
Если еще подробнее, то сначала зададим нулевую прозрачность, а при помощи абсолютного позиционирования и свойства «top» уберем модальное окно за пределы видимости. Дополнительно, для надежности, при помощи свойства «visibility» скроем разметку окна.
В момент, когда появится класс «modal_active» инвертируем «visibility» и «opacity», а также поменять «position» и положение в свойстве «top».
Звучит страшнее, чем кажется, на сам деле все довольно просто.
Теперь в таком состоянии окно скрыто:
Попробуйте добавить вручную и убедиться, что окно успешно появляется.
Пол дела сделали, осталось добавлять этот класс модальному окну при клике по кнопке. Тут подход и разделится. Первый вариант сделаем с использованием jQuery, а второй без него на чистом js.
Но прежде нужно подключить файл скриптов к нашей html страничке. Делается это так:
Вызов модального окна при помощи jQuery
Исходник модального окна с использованием jQuery
Как создать простое модальное окно на CSS
Модальные (всплывающие) окна – это очень популярный элемент интерфейса современных сайтов. Оно может использоваться для вывода различного контента веб-страниц такого, например, как формы (обратной связи, регистрации, авторизации), блоки рекламной информации, изображения, уведомления и др.
В большинстве случаев модальное окно создают на JavaScript. Но его можно создать не только с помощью JavaScript, но и посредством только HTML5 и CSS3.
Демо модального окна
Демонстрацию всплывающего окна, работающего только на HTML5 и CSS3, вы можете посмотреть здесь:
HTML и CSS код модального окна
HTML разметка модального окна:
Название
× Содержимое модального окна.
Ссылка, с помощью которой осуществляется открытие модального окна:
/* стилизация содержимого страницы */ body { font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: #292b2c; background-color: #fff; } /* свойства модального окна по умолчанию */ .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 200ms ease-in; -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; /* анимация перехода */ pointer-events: none; /* элемент невидим для событий мыши */ margin: 0; padding: 0; } /* при отображении модального окно */ .modal:target { opacity: 1; /* делаем окно видимым */ pointer-events: auto; /* элемент видим для событий мыши */ overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */ } /* ширина модального окна и его отступы от экрана */ .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; }
Если вам необходимо убрать скролл страницы после отображения модального окна, то к элементу body нужно добавить CSS-свойство overflow со значением hidden . А после скрытия модального окна данное свойство убрать у элемента body . Данное действие можно осуществить только с помощью JavaScript:
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'; }); });