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

Обновлено: 06.07.2024

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

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

Содержание

autofocus атрибут HTML не имеет никакого эффекта в Bootstrap модальные глаголы. для достижения такого же эффекта, использовать некоторые пользовательские JavaScript:

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

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

Размещение разметки модального окна

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

Предостережения для мобильных устройств

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

Пример статического

Обработанную модальное окно Заголовок, тело, и набор действий в футере.

Modal title

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

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

Текст в модальном окне

Моллис УДО, есть номера commodo предполагаемое luctus, ниси erat porttitor лигулы.

Информеры в модальном окне

Эта кнопка должна вызвать диалоговое окно по клику.

Подсказки в модальном окне

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

Переполняя текст для отображения прокрутки;

Кра маттис миннеаполис пурус сидеть амет любого fermentum.. Одио хусто Кра, dapibus AC и это в, egestas егет квам. Морби Лео рисус, порта переменного тока миннеаполис переменного тока, преддверия на Эрос.

Praesent commodo курсус "магна", ООО "нисл" scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Praesent commodo курсус "магна", ООО "нисл" scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Praesent commodo курсус "магна", ООО "нисл" scelerisque миннеаполис эт. Vivamus sagittis lacus Вэл augue laoreet взгляд долор auctor faucibus.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Сделать модальности можно

Не забудьте добавить role="dialog" и aria-labelledby=". " , ссылаясь на модальное окно Заголовок, чтобы .modal , и role="document" к .modal-dialog сам.

Кроме того, вы можете дать описание вашего модальное окно диалог с aria-describedby на .modal .

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

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

Опционные размеры

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

Каждый начинающий веб-разработчик рано или поздно сталкивается с задачей, реализовать на сайте модальное окно (аналог pop-up окна).

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

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

Демонстрация модального окна.

Мы сделаем адаптивное модальное окно без плагинов и библиотек, на чистом CSS+JS.

HTML разметка

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

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

Содержимое модального окна, состоящее из хедера, тела и футера.

Шапка модального окна

Напишите здесь что-нибудь важное

Добавьте что-нибудь менее важное.

Футер

CSS код

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

.modal display: none; /* Скрыто по умолчанию */
background-color: rgb(0,0,0); /* Затемнение фона */
background-color: rgba(0,0,0,0.5); /* Полупрозрачное затемнение */
z-index: 1; /* Фон на нижнем слое */
overflow: auto; /* При необходимости, то появиться прокрутка */
>

Модальное окно с содержанием, к которому примениться анимация.

.modal-content animation-name: animate;
animation-duration: 0.5s
>

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

Стилизуем крестик (сущность ×), при клике по которому, модальное окно закроется.

.close font-size: 30px;
font-weight: bold;
>

JS код

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

Получить модальное окно по ID.

var modal = document.getElementById('myModal');

Получить кнопку, которая открывает модальное окно по ID.

var btn = document.getElementById("myBtn");

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

var span = document.getElementsByClassName("close")[0];

Функции открыть / закрыть при клике.

Когда пользователь кликает по кнопке, модальное окно открывается – переходит из скрытного состояния в видимое.

btn.onclick = function() modal.style.display = "block";
>

Когда пользователь кликает на крестик в теге span, модальное окно закрывается, наоборот переходит из видимого состояния в скрытное.

span.onclick = function() modal.style.display = "none";
>

Когда пользователь кликает где-то за пределами модального окна, оно закрывается, становиться невидимым.

window.onclick = function(event) if (event.target == modal) modal.style.display = "none";
>
>

Свободное владение языком JavaScript, делает создание web-страниц – не скучным процессом, вы можете сами в этом убедиться, посмотрев мой видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру".

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

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

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

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

До того как начать работу с модальными компонентами Bootstrap, ознакомьтесь со следующей информацией, т.к. параметры недавно изменились.

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

Эффект анимации этого компонента зависит от медиа-запроса с ограниченным движением prefers-reduced-motion . Смотрите раздел специальных возможностей в нашей документации по редукции анимации.

Далее – демонстрация примеров и инструкции по использованию.

Примеры

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

Modal title

Modal body text goes here.

Изменяйте (скрывайте\показывайте) рабочий пример модальной демонстрации, нажав кнопку ниже. Он будет скользить вниз и исчезать из верхней части страницы.

Modal title

Woohoo, you're reading this text in a modal!

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

Modal title

I will not close if you click outside me. Don't even try to press escape key.

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

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

Modal title

This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.

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

Modal title

This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.

This content should appear at the bottom after you scroll.

Вертикальное центрирование

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

Modal title

This is a vertically centered modal.

Modal title

This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.

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

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

Modal title

Popover in a modal

This button triggers a popover on click.

Tooltips in a modal

This link and that link have tooltips on hover.

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

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

Grids in modals

Комбинируйте содержимое модальных элементов

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

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

New message

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

Переключайтесь между несколькими модальными окнами с помощью умного размещения атрибутов data-bs-target и data-bs-toggle . Например, Вы можете переключить модальное окно сброса пароля из уже открытого модального окна входа. Обратите внимание, что несколько модальных окон не могут быть открыты одновременно - этот метод просто переключает между двумя отдельными модальными окнами.

Modal 1

Modal 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

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

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

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

Размер	Клас	Максимальная ширина модали (max-width)
Маленький (Small)	.modal-sm	300px
Стандартный (Default)	None	500px
Большой (Large)	.modal-lg	800px
Очень большой (Extra large)	.modal-xl	1140px

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

Extra large modal

Large modal

Small modal

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

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

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

Full screen Full screen below sm Full screen below md Full screen below lg Full screen below xl Full screen below xxl

Full screen modal

Full screen below sm

Full screen below md

Full screen below lg

Full screen below xl

Full screen below xxl

Переменные

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

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

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

Через атрибуты

Через JavaScript

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

Параметры

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

Название	Тип	По умолч.	Описание
backdrop	boolean or the string 'static'	true	Подключает модальный элемент с затемненным фоном. Еще – задает static для фона, который не закрывает модальный элемент по клику на фоне.
keyboard	boolean	true	Закрывает модальный элемент по нажатию ESC
focus	boolean	true	Фокусируется на модальном элементе по инициализации.

Методы

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

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

Параметры

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

toggle

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

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

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

handleUpdate

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

dispose

Уничтожает модальный элемент.

getInstance

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

События

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

Всем привет, сегодня я покажу вам несколько способов как можно сделать popup окно с контентом. Мы рассмотрим вариант создания модального окна, как на jQuery, так и на нативном JavaScript. С помощью данного скрипта можно добавить на одну страницу несколько модальных окон.

Это простая реализация модального окна, которая позволяет размещать неограниченное количество окон на одну страницу. Функционал модального окна записан в одну функцию, поэтому легко запускается.

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

По стилям все просто. Здесь мы прописываем стили для основных блоков, таких как .modalWrapper – это главный контейнер. Из интересного здесь только элемент .blackBack -это элемент который будет создавать задний притемнённый фон, а делее будет обрабатывать нажатие и закрывать модальное окно.

Модальное окно состоит из следующих частей:

jQuery

Логика написания модального окна с использование jQuery и нативного JS очень похожи, мы просто проверяем наличие класса active у элемента. Здесь я этого я создаю функцию openModal которая будет проводить проверку.

Реализация с использование нативного JavaScript

Реализация на нативном JavaScript отличается только названиями методов.

Вам также будет интересно

Готовая форма с отправкой информации через ajax в Telegram

Готовая форма с отправкой файла drag & drop. Поле для передачи файла с помощью перетаскивания его в область

Читайте также: