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

Вы не знаете как должны работать модальные окна

Уверен, многие хоть раз создавали всплывающее модальное окно. Но задумывались ли вы об определении этого компонента? Как он должен работать?

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

Я покажу, как просто создавать сложные, удобные, производительные и доступные модальные окна независимо от браузера, платформы, устройства или способа взаимодействия пользователя.

Этот список сформирован на основе спецификаций WAI-ARIA, HTML Living Standard и моего личного опыта. И хотя я буду говорить про веб, большинство правил и рекомендаций применимы для модальных окон где угодно.

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

Модальное окно — это окно наложенное либо на документ, либо на другие окна. При этом, любой контент под модальным окном является недоступным для взаимодействия.

Теги и атрибуты

Интерактивным элементом для открытия диалогового окна должна выступать кнопка. Не <div> , не <span> не <a> , не любой другой тег. Исключительно <button> . И касается не только диалоговых окон, <button> — самый надежный и доступный способ создавать интерактивные элементы на странице.

Простейшая реализация кнопки открывающая диалог по его id:

<dialog>

Для различных диалогов, уведомлений и прочих перекрывающих документ элементов существует тег <dialog> . Его вы и должны использовать. К огромному сожалению, его поддержка не самая лучшая:

Chromium — полная поддержка.
Firefox — поддержка за флагом.
Safari не поддерживает вовсе.

Так что для этих браузеров нужно подгружать polyfill:

Вы, конечно, можете использовать и другой элемент для реализации диалогового окна, например так:

но тогда вам придётся самостоятельно реализовывать всё поведение описанное далее. В то время как с <dialog> большую часть браузер реализует из коробки.

Внешний вид и содержание

Вскользь коснусь внешнего вида.

На небольших экранах диалоговое окно должно занимать 100% его размера. Если ваш диалог будет большим:

Его будет легче «нащупать». Дело в том, что пользователь может взаимодействовать со страницей следующим образом: он водит пальцем по дисплею, а программа чтения с экрана озвучивает то, что в данный момент находится под пальцем.
Пользователю гарантированно не будут озвучиваться элементы «под ним». Иначе, например, VoiceOver на iPad может озвучивать отдельные фрагменты страницы под модальным окном даже «сквозь» оверлей блокирующий доступ указателю.
Вы скроете прокрутку фона на некоторых устройствах при прокрутке контента в диалоговом окне.
Удобнее для одной руки. Если окно растянуто на всю высоту – то у вас есть возможность прижать кнопки управления к нижней части дисплея. Туда намного проще дотянуться одной рукой пользователям современных смартфонов.
Больше места для контента на устройствах с маленьким экраном, таких как iPhone SE.

Заголовок обязателен

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

Настоятельно рекомендуется использовать для заголовка тег <h1>-<h6> .

Но просто добавить заголовок в диалоговое окно недостаточно. Их нужно ещё и логически «связать». Сделать это можно с помощью атрибута aria-labelledby следующим образом:

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

Статический контент должен быть связан с окном

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

Делается это атрибутом aria-describedby :

Если в вашем диалоговом окне много контента, тогда стоит обернуть его в один <div> и связать элемент диалога уже с ним:

Важно! Заголовок и любые кнопки не относящиеся к содержимому, а служащие для управления диалоговым окном, не должны быть включены в элемент на который указывает aria-describedby . Они должны быть вынесены отдельно:

Интерактивные элементы связывать не нужно

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

Элементы формы являются интерактивными. И они будут озвучены скринридером, когда пользователь начнёт с ними взаимодействовать.

Если скомбинировать и статический текст и форму:

Способы закрыть окно

Внутри диалогового окна обязана быть кнопка чтобы его закрыть. Не <div> , не <span> не <a> , не любой другой тег. Исключительно <button> . Это самый надежный способ гарантировать, что любой пользователь сможет закрыть диалоговое окно. Вы же не любите модальные окна которые невозможно закрыть?

Дополнительно, в зависимости от вашей логики, вы можете позволить пользователю закрыть диалог кликнув за его пределами или нажав Escape (встроено в <dialog> из коробки).

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

Как я писал ранее, во многих случаях диалоговое окно может занимать всю или большую часть экрана. Таким образом попасть в него может быть сложно или невозможно.
Такой оверлей семантически не считается интерактивным элементом. Он не может быть в фокусе и на него невозможно «нажать» клавишами.

Простейшая реализация кнопки закрывающей родительский диалог:

А если вы делаете кнопку с иконкой, то не забывайте про подпись, чтобы передать ёё назначение:

Поведение фокуса

При открытии диалога

Во время открытия диалогового окна фокус должен быть перемещён на элемент внутри него. На какой именно — зависит от содержания.

В общем случае фокус перемещается на первый интерактивный элемент. Именно так ведет себя нативный <dialog> в браузере. Но нельзя делать сам элемент окна фокусируемым и перемещать фокус на него.

Например, для диалога с формой первый интерактивный элемент это первый <input> . Если ваше диалоговое окно носит чисто информативный характер, например, уведомление об успешной подписке, тогда первым и единственным элементом будет кнопка закрывающая диалог.

Но есть и несколько исключений:

Запрос подтверждения чего-либо. Если ваш диалог запрашивает у пользователя подтверждения перед выполнением каких-то необратимых действий (удаление чего-то или выполнение финансовых операций), тогда фокус автоматически должен ставится на кнопку «отмены» этих действий, независимо от её расположения.

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

Переместить или продублировать интерактивные элементы так, чтобы первый из них был в видимой части экрана. Например, выполнить кнопку закрыть в виде крестика и закрепить в верхней части диалогового окна.
Заголовок или первый абзац текста нужно сделать фокусируемым при помощи tabindex=»-1″ и перемещать фокус на него. Но при этом подходе некоторые программы чтения с экрана могут озвучивать заданный текст дважды: сначала как заголовок и описание окна, а потом как содержание выделенного элемента.

Управлять куда именно попадёт фокус при открытии модального окна можно с помощью атрибута autofocus :

Внутри диалога

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

Чтобы блокировать указатель обычно документ накрывается полупрозрачным блоком.

Но этого недостаточно, так как остаётся ещё и навигация клавишами Tab / Shift + Tab . Также это могут быть клавиши громкости на смартфонах или специальные клавиши на дополнительных инструментах подключенных по USB/Bluetooth. Этот способ навигации тоже должен быть заблокирован.

После попадания фокуса в модальное окно пользователь может перебирать интерактивные элементы внутри этого окна, но не должен выходить за его пределы. Другими словами, такое диалоговое окно работает как ловушка для фокуса. Это поведение встроено в <dialog> , так что от вас никаких действий не требуется. А вот используя другой элемент с role=»dialog» его нужно реализовывать самостоятельно средствами JavaScript.

При закрытии диалога

При закрытии диалогового окна фокус должен быть перемещён туда, где он был в момент открытия. Это поведение не является частью <dialog> и браузер полностью оставляет это на усмотрение разработчика.

Но и тут есть одно исключение: если элемент более не доступен, тогда фокус нужно вернуть туда, откуда наиболее логично для пользователя продолжить работу.

Пример

Предлагаю разобрать на примере. Представим систему из трех диалоговых окон:

Сообщает пользователю об наличии подписки. В нем две кнопки: «Условия подписки» и «Подписаться»
Отображается по клику на «Условия подписки». Открывается поверх первого.
Отображается по клику на «Подписаться». Заменяет собой первое.

В примерах ниже я специально пропустил дополнительные атрибуты и элементы, для упрощения кода.

Итак, у нас есть стартовая кнопка.

По нажатию на неё открывается первый диалог. Фокус автоматически перемещается на первый интерактивный элемент. А закрытие диалога должно возвращать фокус назад.

Далее пользователь перемещает фокус на «Условия подписки» и нажимает. Открывается второй диалог поверх первого. Фокус перемещается в него, а возвращаться должен на эту же кнопку в первом диалоге:

После закрытия второго диалога ваш JavaScript должен вернуть фокус на кнопку «Условия подписки» в первом.

После чего пользователь нажимает кнопку «Подписаться». По условиям нашей задачи открывается третий диалог. Фокус автоматически перемещается в него. А первый диалог закрывается:

И вот проблема: третье окно должно вернуть фокус на кнопку в первом, но первое окно больше не доступно. В таких случаях фокус нужно вернуть туда, куда указывал закрытый диалог — на кнопку «Рассылка» с которой пользовать начал.

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

Помните, как во время установки программы в Windows можно просто нажимать Enter? Так вот это пример хорошей работы с фокусом: каждый раз, при переходе на новый экран в фокус ставится элемент, с которым вы скорее всего будете взаимодействовать — кнопка «Далее» или «Обзор».

Модальное окно для сайта на чистом CSS и JavaScript

Модальное окно – это элемент интерфейса, которой визуально представляет собой «всплывающее окно», отображающееся над остальной частью страницы .

При этом показ окна обычно сопровождают затемнением всей другой части страницы. Это действие позволяет визуально отделить его от остального содержимого страницы, а также показать, что в данный момент только оно одно является активным элементом. При этом контент, расположенный под ним, делают недоступным (т.е. пользователь не сможет с ним взаимодействовать пока он не закроет это окно).

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

Изображение модального окна:

Вид модального окна, созданного с помощью JavaScript

Оно состоит из заголовка (хедера), основной части и футера.

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

Загрузка и установка модального окна

Проект модального окна расположен на GitHub. Перейти к нему можно по этой ссылке.

Процесс установки модального окна на страницу выполняется посредством подключения к ней его CSS и JavaScript файлов, или добавления их содержимого в соответствующие свои файлы.

Как создать и вызвать модальное окно

Эта реализация модального окна не требует непосредственного размещения его HTML кода на странице . Это выполняется программно.

Таким образом, для того чтобы создать его достаточно просто вызвать функцию $modal :

При создании окна вы можете сразу же его настроить, для этого в данную функцию необходимо передать данные в формате объекта. Осуществляется это с помощью соответствующих ключей (свойств). Например, с помощью ключа title вы можете задать заголовок, который будет иметь всплывающее окно по умолчанию. Ключ content позволяет установить содержимое, а footerButtons – кнопки для отображения их в его нижней части (футере).

Все эти ключи являются не обязательными . Если не указать title , то заголовок будет иметь название «Новое окно» . Если не установить значению ключу content , то модальное окно в этом случае создатся с пустым содержимым.

Ключ footerButtons в отличие от title и content принимает в качестве значения массив объектов . Каждый объект в этом массиве представляет собой кнопку . Она задаётся с помощью ключей text , class , handler . С помощью них вы можете установить кнопке (элементу <button> ) текст, значение атрибутов class и data-handler . Если ключ footerButtons вообще не указать, то в этом случае модальное окно будет создано без футера.

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

Пример создания модального окна с настройками по умолчанию:

Этот код создаст модальное окно без футера, с пустым содержимым и заголовком «Новое окно».

Но функция $modal не только создаёт модальное окно в DOM, но также предоставляет методы для управления им.

Для этого нужно создать переменную и присвоить ей результат выполнения функции $modal .

В эту созданную переменную будет помещён объект (а точнее ссылка на него), имеющий следующие методы:

show – для отображения модального окна;
hide – для скрытия модального окна;
destroy – для удаления модального окна из DOM и связанных с ним обработчиков событий;
setContent – для установки контента;
setTitle – для установки заголовка.

Эти методы предназначены для взаимодействия с созданным окном. Они позволяют его открыть, закрыть, изменить ему контент и др.

Рассмотрим, как работать с этими методами на примерах.

Например, метод show используется когда вам необходимо показать (открыть) модальное окно:

Метод hide применяется для его скрытия:

Методы setContent и setTitle предназначены соответственно для изменения контента и заголовка модального окна после его создания.

В возвращаемом объекте также есть метод destroy . Его необходимо использовать только когда вам необходимо полностью удалить модальное окно из DOM, а также связанные с ним события:

Данную операцию имеет смысл использовать только в том случае, если созданное модальное окно вам больше не нужно на странице.

Примеры использования скрипта для создания модальных окон

1. Пример кода, выполняющий открытие модального окна при нажатии на определённую кнопку.

2. Пример кода, позволяющий открыть одно и тоже модальное окно посредством клика на разные элементы (определяется элемент, который может открыть это окно, с помощью наличия у него атрибута data-toggle=»modal» ):

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

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

5. Пример, в котором создано 2 разных модальных окна. Первое модальное окно открывается при нажатии на одни элементы, а второе – при клике на другие:

6. Пример всплывающего окна, данные в которое загружаются с использованием AJAX:

Пример содержимого файла «json-1»:

7. Этот пример содержит код для обработки различных событий, связанных с модальном окном и кнопками, расположенными в нём:

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

В этом разделе приведена информация для тех, кто хочет более подробно разобраться с тем, как работает это модальное окно.

Её JavaScript код представлен посредством функции $modal :

В качестве результата эта функция возвращает объект, состоящий из 5 методов. Они позволяют нам выполнять различные действия над созданным модальным окном. Назначение каждого метода, а также различные примеры как их использовать мы уже подробно рассмотрели выше. Здесь мы более подробно разберём внутренние переменные и функции $modal .

В $modal имеются следующие переменные _elemModal , _eventShowModal , _eventHideModal , _hiding , _destroyed , _animationSpeed и функции _createModal , _showModal , _hideModal , _handlerCloseModal .

Функция _createModal предназначена для формирования HTML-кода модального окна (DOM структуры) и добавления её на страницу. В качестве результата она возвращает ссылку на базовый элемент этого модального окна. Т.к. нам эта ссылка нужна в других частях $modal , то сохраним её в переменную _elemModal :

Переменные _eventShowModal и _eventHideModal применяются для хранения созданных нами кастомных событий «show.modal» и «hide.modal». Событие «show.modal» мы будем вызывать при открытии модального окна, а «hide.modal» – при закрытии. Эти события будем генерировать для объекта document . Используя их, вы можете очень просто добавить свою логику при открытии и закрытии модального окна:

Переменные _hiding и _destroyed используются для хранения состояний. Первая применяется для индикации процесса скрытия модального окна. Она имеет значение true во время скрытия окна, в остальных моментах — false . Вторая переменная хранит true или false , в зависимости от того, удалены ли DOM элементы модального окна со страницы и связанные с ним события или нет.

Переменная _animationSpeed используется для указания времени длительности процесса скрытия модального окна (в миллисекундах).

Функция _showModal предназначена для включения отображения модального окна на странице, а _hideModal – для его скрытия.

Функция _handlerCloseModal используется в качестве обработчика события «click» для документа и выполняет скрытие модального окна при нажатии на кнопку его закрытия или вне его.

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

Используйте плагин модального окна Bootstrap для JavaScript, чтобы добавить на свой сайт диалоговые окна для лайтбоксов, уведомлений пользователей или полностью настраиваемого контента.

Как это устроено

Прежде чем приступить к работе с модальным компонентом Bootstrap, обязательно прочтите следующее, поскольку параметры нашего меню недавно изменились.

Модальные окна создаются с помощью HTML, CSS и JavaScript. Они располагаются поверх всего остального в документе и удаляют прокрутку из <body> , так что вместо этого прокручивается модальное содержимое.
Клик по модальному «фону» автоматически закрывает модальный.
Bootstrap поддерживает только одно модальное окно за раз. Вложенные модальные окна не поддерживаются, поскольку мы считаем, что они неудобны для пользователей.
В модальных окнах используется position: fixed , что иногда может быть немного специфичным при его рендеринге. По возможности размещайте модальный HTML-код на верхнем уровне, чтобы избежать потенциального вмешательства со стороны других элементов. Вы, вероятно, столкнетесь с проблемами при вложении .modal в другой фиксированный элемент.
Еще раз, из-за position: fixed есть некоторые предостережения при использовании модальных окон на мобильных устройствах. См. нашу документацию по поддержке браузеров для получения дополнительной информации.
Из-за того, как HTML5 определяет свою семантику, атрибут HTML autofocus не действует в Bootstrap. модальные окна. Чтобы добиться того же эффекта, используйте собственный JavaScript:

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

Примеры

Модальные компоненты

Ниже приведен пример статического модального окна (это означает, что его position и display были переопределены). Включены модальный заголовок, модальное тело (требуется для padding ) и модальный нижний колонтитул (необязательно). Мы просим вас по возможности включать модальные заголовки с действиями по отклонению или предоставить другое явное действие по отклонению.

Заголовок модального окна

Здесь идет основной текст модального окна

Живая демонстрация

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

Заголовок модального окна

Уууу, вы читаете этот текст в модальном!

Статический фон

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

Заголовок модального окна

Я не закроюсь, если ты щелкнешь вне меня. Даже не пытайтесь нажимать клавишу выхода.

Прокрутка длинного контента

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

Заголовок модального окна

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

Вы также можете создать прокручиваемое модальное окно, которое позволяет прокручивать модальное тело, добавляя .modal-dialog-scrollable к .modal-dialog .

Заголовок модального окна

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

Это содержимое должно появиться внизу после прокрутки.

Центрование по вертикали

Добавьте .modal-dialog-centered к .modal-dialog для вертикального центрирования модального окна.

Заголовок модального окна

This is a vertically centered modal.

Заголовок модального окна

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

Всплывающие подсказки и всплывающие окна

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

Заголовок модального окна

Всплывающие окна в модальном окне

Эта кнопка вызывает всплывающее окно при нажатии.

Всплывающие подсказки в модальном окне

Эта ссылка и эта ссылка имеют всплывающие подсказки при наведении курсора.

Использование сетки

Используйте сеточную систему Bootstrap в модальном окне, вложив .container-fluid в .modal-body . Затем используйте обычные классы системы сетки, как и везде.

Сетки в модальных окнах

Изменяющееся модальное содержимое

У Вас есть несколько кнопок, которые запускают одно и то же модальное окно с немного разным содержимым? Используйте event.relatedTarget и HTML data-* атрибуты, чтобы изменять содержимое модального окна в зависимости от какая кнопка была нажата.

Ниже представлена живая демонстрация, за которой следуют примеры HTML и JavaScript. Для получения дополнительной информации прочтите документацию по модальным событиям для получения подробной информации о relatedTarget .

Новое сообщение

Переключение между модальными окнами

Модалка 1

Модалка 2

Изменение анимации

Переменная $modal-fade-transform определяет состояние преобразования .modal-dialog перед модальной плавной анимацией, переменная $modal-show-transform определяет преобразование .modal-dialog в конец модальной плавной анимации.

Если Вам нужна, например, анимация с увеличением, Вы можете установить $modal-fade-transform: scale(.8) .

Удаление анимации

Для модальных окон, которые просто появляются, а не исчезают при просмотре, удалите класс .fade из Вашей модальной разметки.

Динамические высоты

Если высота модального окна изменяется, пока он открыт, Вы должны вызвать myModal.handleUpdate() , чтобы скорректировать положение модального окна в случае появления полосы прокрутки.

Доступность

Не забудьте добавить aria-labelledby=". " , ссылаясь на Заголовок модального окна, в .modal . Кроме того, Вы можете дать описание Вашего модального диалога с помощью aria-describedby в .modal . Обратите внимание, что Вам не нужно добавлять role="dialog" , поскольку мы уже добавляем его через JavaScript..

Встраивание видео с YouTube

Встраивание видео YouTube в модальные окна требует дополнительного JavaScript не в Bootstrap для автоматической остановки воспроизведения и т.д. См. этот полезный пост о переполнении стека для получения дополнительной информации.

Дополнительные размеры

Модальные окна имеют три необязательных размера, доступных через классы модификаторов, которые помещаются в .modal-dialog . Эти размеры действуют в определенных контрольных точках, чтобы избежать горизонтальных полос прокрутки на более узких окнах просмотра.

Размер	Класс	Максимальная ширина модального окна
Маленькое	.modal-sm	300px
По умочланию	нет	500px
Большое	.modal-lg	800px
Очень большое	.modal-xl	1140px

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

Очень большое модальное окно

Большое модальное окно

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

Полноэкранное модальное окно

Другое переопределение — это возможность вывести модальное окно, охватывающее область просмотра пользователя, доступное через классы модификаторов, которые помещаются в .modal-dialog .

Класс	Доступность
.modal-fullscreen	Всегда
.modal-fullscreen-sm-down	Меньше 576px
.modal-fullscreen-md-down	Меньше 768px
.modal-fullscreen-lg-down	Меньше 992px
.modal-fullscreen-xl-down	Меньше 1200px
.modal-fullscreen-xxl-down	Меньше 1400px

Полноэкранное модальное окно

Полноэкранный меньше sm

Полноэкранный меньше md

Полноэкранный меньше lg

Полноэкранный меньше xl

Полноэкранный меньше xxl

Переменные

Адаптивные полноэкранные модальные окна генерируются с помощью карты $breakpoints и цикла в scss/_modal.scss .

Использование

Модальный плагин переключает ваш скрытый контент по запросу с помощью атрибутов данных или JavaScript. Он также переопределяет поведение прокрутки по умолчанию и генерирует .modal-backdrop , чтобы предоставить область клика для отклонения отображаемых модальных окон при щелчке вне модального окна.

Через атрибуты данных

Переключение

Активируйте модальное окно без написания JavaScript. Установите data-bs-toggle="modal" на элемент контроллера, например кнопку, вместе с data-bs-target="#foo" или href="#foo" для нацеливания на конкретное модальное окно для переключения.

Отклонение

Отклонение может быть достигнуто с помощью атрибута data на кнопке внутри modal, как показано ниже:

или на кнопке за пределами modal с помощью data-bs-target , как показано ниже:

Через JavaScript

Создайте модальное окно с одной строкой JavaScript:

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-bs- , как в data-bs-backdrop="" .

Наименование	Тип	По умолчанию	Описание
backdrop	boolean or the string ‘static’	true	Включает элемент модального фона. В качестве альтернативы укажите static для фона, который не закрывает модальное окно при нажатии.
keyboard	boolean	true	Закрывает модальное окно при нажатии клавиши выхода.
focus	boolean	true	При инициализации фокусируется на модальном окне.

Методы

Асинхронные методы и переходы

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

Passing options

Активирует Ваш контент как модальное окно. Принимает необязательные параметры object .

toggle

Вручную переключает модальное окно. Возврат к вызывающей стороне до того, как модальное окно было фактически показано или скрыто (т.е. до того, как произойдет событие shown.bs.modal или hidden.bs.modal ).

Открывает модальное окно вручную. Возврат к вызывающей стороне до фактического отображения модального окна (т.е. до того, как произойдет событие shown.bs.modal ).

Also, you can pass a DOM element as an argument that can be received in the modal events (as the relatedTarget property).

Скрывает модальное окно вручную. Возврат к вызывающей стороне до того, как модальное окно было фактически скрыто (т.е. до того, как произойдет событие hidden.bs.modal ).

handleUpdate

Вручную скорректируйте положение модального окна, если высота модального окна изменяется, пока он открыт (то есть в случае появления полосы прокрутки).

dispose

Уничтожает элемент модальное окно. (Удаляет сохраненные данные в элементе DOM)

getInstance

Статический метод, позволяющий получить модальный экземпляр, связанный с элементом DOM.

getOrCreateInstance

Статический метод, который позволяет вам получить модальный экземпляр, связанный с элементом DOM, или создать новый, если он не был инициализирован.

События

Модальный класс Bootstrap предоставляет несколько событий для подключения к модальным функциям. Все модальные события запускаются в самом модальном окне (то есть в <div >).

Модальные окна на HTML и CSS без JavaScript и jQuery

Последнее время для реализации любой ерунды на сайте поисковики предлагают установить на выбор несколько плагинов или как минимум использовать какой-нибудь язык программирования, например JavaScript с библиотекой jQuery. Особенно «не повезло» пользователям WordPress, мне кажется, что для этой блого-платформы есть плагины на все случаи жизни и у начинающих может сложится впечатление, что вот жить без плагинов совсем никак не возможно.

В этой статье я расскажу как создать модальное окно на чистом HTML и CSS без каких-либо языков программирования и дополнительных библиотек, в том числе и на WordPress!

Что такое модальное окно

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

Как работает модальное окно

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

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

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

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

Пример модального окна:

Модальные окна на HTML и CSS без JavaScript и jQuery

HTML код модального окна

На моем сайте для окна приведенного выше код модального окна простейший и он выглядит следующим образом:

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

Как запустить модальное окно

Обратиться к модальному окну можно по его ID. Для этого в адресной строке браузера на странице с модальным окном просто добавьте к названию страницы знак диеза (хеш, решетка) и ID модального окна. Например если адрес вашей страницы http://sitename.tld/pagename.html, то для вызова модального окна из моего примера его необходимо преобразовать к виду http://sitename.tld/pagename.html#error

CSS стили модального окна

Оформление модального окна в моем примере выглядят следующим образом:

Как это работает

В обычном режиме модальное окно не отображается, так как прозрачно (за это отвечает CSS стиль opacity:0;) и не мешает просмотру страницы.

Если же обратиться к блоку модального окна по его ID, то сработает стиль который сделает модальное окно видимым и произойдет перехват мыши.

При нажатии кнопки ЗАКРЫТЬ мы переходим на родительскую страницу (адрес без хеш-тега и ID модального окна) и модальное окно опять станет невидимым.