Главная » Языки программирования

Кнопка закрытия модального окна html

Содержание
  1. Как сделать модальное окно на сайте
  2. Вызов модального окна при помощи jQuery
  3. W3.CSS Modal
  4. Классы W3.CSS Modal
  5. Создание модального окна
  6. Открытие модального окна
  7. Закрытие модального окна
  8. Модальные шапка и подвал
  9. Модальное окно как карточка
  10. Вызов и закрытие модального окна — Триггеры и data-атрибуты
  11. Исходные данные — Модальное окно скрыто
  12. Используем data-атрибуты
  13. Закрытие модального — Клик на область вне окна
  14. Закрытие модального — Клик на ESC

Как сделать модальное окно на сайте

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

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

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

Чтобы статья получилась максимально полной, будем придерживаться следующего плана и сделаем:

  • модальное окно с использованием jQuery.
  • Простое модальное окно с использованием чистого js.

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

Структура проекта для понимания какие файлы и где находятся.

Читайте также:  Vw passat ru html

Начнем с разметки. Для создания модального окна я обычно пользуюсь такой структурой.

Где «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

Источник

W3.CSS Modal

Модальное окно всегда отображается поверх текущей страницы.

Классы W3.CSS Modal

W3.CSS включает в себя следующие классы:

Создание модального окна

В качестве содержимого модального окна может быть использован любой HTML-элемент ( блок div , header , абзац, изображение, и т.д. ).

  
Some text in the Modal..
 
Some text in the Modal..

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

Чтобы открыть модальное окно на CSS , можно использовать любой HTML-элемент . Чаще всего это кнопка или ссылка. Добавьте атрибут onclick и укажите идентификатор модального окна ( в нашем примере это id01 ), используя метод document.getElementById() .

Закрытие модального окна

Чтобы закрыть модальное окно, добавьте класс w3-closebtn к элементу с атрибутом onclick , указывающим на идентификатор модального окна ( id01 ). Также можно закрыть модальное окно, кликнув мышкой за его пределами ( смотрите пример, приведенный ниже ).

Совет: значок ( ; ) представляет собой HTML-объект , который более предпочтителен для использования в качестве кнопки закрытия, чем буква «х» .

Модальные шапка и подвал

Используйте классы w3-container для создания различных разделов внутри модального контента:

div 
Modal Header  
Some text..
 
Some text..
 
 
Modal Footer

Модальное окно как карточка

Чтобы отобразить модальное окно как карточку, добавьте класс w3-card- * к контейнеру w3-modal-content :

Источник

Вызов и закрытие модального окна — Триггеры и data-атрибуты

Пропишем функционал модального окна и пропишем его вызов сразу на несколько триггеров .

Триггеры — это элементы, которые вызывают последующие действия.

Продолжим работать с проектом, где создавались табы и таймер обратного отсчета.

Триггерами модального окна являются две кнопки «Связаться с нами».

Исходные данные — Модальное окно скрыто

Фрагмент HTML-кода для модального окна + триггеры

Связаться с нами
Связаться с нами
Перезвонить мне

Исходная страница в Браузере

По умолчанию модальное окно скрыто. Чтобы его увидеть, нужно в Инструментах разработчика — во вкладке Elements выделить . А во вкладке Styles — снять галочку со свойства display: none . См. иллюстрацию ниже.

Используем data-атрибуты

Триггеры (в данном случае две кнопки «Связаться с нами») часто имеют разные классы /идентификаторы/теги, поэтому чтобы группа триггеров вызывало одно и то же действие, им назначают data-атрибуты.

Например, data-атрибут data-modal , установленный для группы кнопок, будут говорить о том, что эти элементы отвечают за вызов модального окна.

То же самое касается элемента/ов , закрывающего модальное окно — ему/им также можно назначить data-атрибут , например data-close .

Связаться с нами  
 
Связаться с нами 
 
 
Перезвонить мне

Прописаны data-атрибуты data-modal строки №5 и №11 — для возможности вызова модального окна и data-close строка №19 — для закрытия модального окна.

Пример 1.1 — Используем инлайн-стили
const modalTrigger = document.querySelectorAll('[data-modal]'), modalCloseBtn = document.querySelector('[data-close]'), modalWindow = document.querySelector('.modal'); // Открываем модальное окно modalTrigger.forEach(item => < item.addEventListener('click', () =>< modalWindow.style.display = 'block'; document.body.style.overflow = 'hidden'; >); >); // Закрываем модальное окно modalCloseBtn.addEventListener('click', () => < modalWindow.style.display = 'none'; document.body.style.overflow = ''; >);

Здесь для вызова и скрытия модального окна используются инлайн-стили.

При этом для тега body устанавливается стиль overflow = ‘hidden’ , чтобы при вызове модального окна содержимое страницы не прокручивалось .

При закрытии модального окна overflow = » (устанавливается значение по умолчанию).

Пример 1.2 — Свойство classList
const modalTrigger = document.querySelectorAll('[data-modal]'), modalCloseBtn = document.querySelector('[data-close]'), modalWindow = document.querySelector('.modal'); modalTrigger.forEach(item => < item.addEventListener('click', () =>< modalWindow.classList.add('show'); modalWindow.classList.remove('hide'); document.body.style.overflow = 'hidden'; >); >); modalCloseBtn.addEventListener('click', () => < modalWindow.classList.add('hide'); modalWindow.classList.remove('show'); document.body.style.overflow = ''; >);

Здесь для вызова и скрытия модального окна используется свойство classList и его методы add и remove.

Пример 1.3 — Свойство classList — toggle
const modalTrigger = document.querySelectorAll('[data-modal]'), modalCloseBtn = document.querySelector('[data-close]'), modalWindow = document.querySelector('.modal'); modalTrigger.forEach(item => < item.addEventListener('click', () =>< modalWindow.classList.toggle('show'); document.body.style.overflow = 'hidden'; >); >); modalCloseBtn.addEventListener('click', () => < modalWindow.classList.toggle('show'); document.body.style.overflow = ''; >);

Здесь для вызова и скрытия модального окна используется свойство classList и его метод toggle.

Закрытие модального — Клик на область вне окна

Закрытие модального окна при клике на подложке/область вне окна.

Рассмотрим структуру модального окна.

modal — это подложка модального окна (width: 100% и height: 100%). В примере ниже для наглядности обозначены границы желтого цвета.

modal__dialog — это обертка контента модального окна. Для наглядности обозначены границы красного цвета.

Используя event.target, нужно отследить , куда кликнул пользователь : если клик происходит за пределами модального окна, то есть, в нашем случае, на его подложке modal , то окно будет закрыто.

const modalTrigger = document.querySelectorAll('[data-modal]'), modalCloseBtn = document.querySelector('[data-close]'), modalWindow = document.querySelector('.modal'); modalTrigger.forEach(item => < item.addEventListener('click', () =>< modalWindow.classList.add('show'); modalWindow.classList.remove('hide'); document.body.style.overflow = 'hidden'; >); >); modalCloseBtn.addEventListener('click', () => < modalWindow.classList.add('hide'); modalWindow.classList.remove('show'); document.body.style.overflow = ''; >); // При клике ВНЕ окна - закрываем его modalWindow.addEventListener('click', (e) => < if (e.target === modalWindow) < modalWindow.classList.add('hide'); modalWindow.classList.remove('show'); document.body.style.overflow = ''; >>);

Назначаем для модального окна обработчик события.

Если место клика пользователя — это подложка модального окна: if (e.target === modalWindow) , то модальное окно закрывается.

Стоит напомнить, что правильный синтаксис подразумевает обязательную передачу объекта события в качестве аргумента в callback-функцию.

Оптимизация кода

Повторяющийся код заносится в функцию closeModal() .

const modalTrigger = document.querySelectorAll('[data-modal]'), modalCloseBtn = document.querySelector('[data-close]'), modalWindow = document.querySelector('.modal'); modalTrigger.forEach(item => < item.addEventListener('click', () =>< modalWindow.classList.add('show'); modalWindow.classList.remove('hide'); document.body.style.overflow = 'hidden'; >); >); function closeModal()< modalWindow.classList.add('hide'); modalWindow.classList.remove('show'); document.body.style.overflow = ''; >; modalCloseBtn.addEventListener('click', closeModal); // Функция передается // При клике ВНЕ окна - закрываем его modalWindow.addEventListener('click', (e) => < if (e.target === modalWindow) < closeModal(); // Функция вызывается >>);

В первом случае функция closeModal() передается, во втором вызывается.

Закрытие модального — Клик на ESC

Закрытие модального окна при клике на клавишу ESC.

Событие keydown происходит при нажатии клавиши, а keyup – при отпускании.

Как отслеживать нажатия клавиш?

Здесь снова используется объект события и его свойство code.

Свойство code объекта события позволяет получить физический код клавиши .

У каждой клавиши есть свой код.

Таким образом, есть возможность отслеживать код нажатой клавиши.

const modalTrigger = document.querySelectorAll('[data-modal]'), modalCloseBtn = document.querySelector('[data-close]'), modalWindow = document.querySelector('.modal'); modalTrigger.forEach(item => < item.addEventListener('click', () =>< modalWindow.classList.add('show'); modalWindow.classList.remove('hide'); document.body.style.overflow = 'hidden'; >); >); function closeModal()< modalWindow.classList.add('hide'); modalWindow.classList.remove('show'); document.body.style.overflow = ''; >; modalCloseBtn.addEventListener('click', closeModal); // Функция передается // При клике ВНЕ окна - закрываем его modalWindow.addEventListener('click', (e) => < if (e.target === modalWindow) < closeModal(); // Функция вызывается >// Закрытие модального - Клик на ESC document.addEventListener('keydown', (e) => < if (e.code === "Escape" && modalWindow.classList.contains('show')) < closeModal(); >>);

Закрытие модального окна при клике на клавишу ESC.

Обработчик события назначается для объекта document .

Если пользователь нажимает на клавишу ESC , то происходит закрытие модального окна. При условии, что модальное окно открыто: modalWindow.classList.contains(‘show’) (делается это для того, чтобы функция closeModal() не срабатывала при каждом нажатии на клавишу ESC).

Источник

Оцените статью