Коллекция бесплатных jQuery модальных/диалоговых окон примеров кода и плагинов для рекламы, форм и простых сообщений. Обновление ноябрьской коллекции 2021 года. 5 новых предметов.
Модальные окна CSS
Начальная загрузка Windows
Модальные окна с попутным ветром
Примеры модальных/диалоговых окон jQuery
Модальные/диалоговые плагины jQuery
О коде
Расширение кнопки контакта и всплывающего сообщения отправки
Используя фоновый фильтр , мы можем создать фильтрующий слой при открытии модального окна. Легко создайте типичный затемненный фон, но вы также можете создавать интересные эффекты, объединяя фильтры.
Возиться с физикой ключевого кадра/перехода для модального окна. В основном сосредоточены на времени между оверлеем, модальным контейнером и модальным контентом, чтобы попытаться сделать все событие более органичным.
Avgrund — это плагин jQuery для ваших модальных окон и всплывающих окон. Он использует новую концепцию, показывающую глубину между всплывающим окном и страницей. Он работает во всех современных браузерах и изящно деградирует в тех, которые не поддерживают переходы и трансформации CSS.
О плагине
ИзиМодал
Элегантный, отзывчивый, гибкий и легкий модальный плагин с jQuery.
О плагине
модальный jQuery
Простой и легкий метод отображения модальных окон с помощью jQuery.
О плагине
Анимированный модал
animatedModal.js — это плагин jQuery для создания полноэкранного модального окна с переходами CSS3. Вы можете использовать переходы из animate.css или создавать свои собственные переходы.
О плагине
Наложение всплывающего окна jQuery
Плагин
jQuery для отзывчивых и доступных модальных окон и всплывающих подсказок.
О плагине
bВсплывающее окно
О плагине
Окно OmniWindow
OmniWindow — чрезвычайно настраиваемый модальный плагин для jQuery.
О плагине
Зебра_Диалог
Небольшой, компактный и легко настраиваемый подключаемый модуль jQuery для создания модальных диалоговых окон.
О плагине
jquery-plainModal
Простой плагин jQuery для полностью настраиваемых модальных окон.
Симпатичные, простые и мощные модальные окна с использованием jQuery. Замените alert(), confirm(), prompt() и многие другие плагины на стильные и элегантные.
О плагине
модальный
Плагин
jQuery для создания модальных окон.
О плагине
Фокус
Плагин с минимальным всплывающим окном, модальным окном, уведомлением, оверлеем, ящиком и диалоговым окном.
О плагине
Модальная коробка
Плагин Modal Box поможет вам создать всплывающее окно перед другими элементами на вашей странице. Его можно использовать для рекламы, формы подписки, загрузки форм, форм входа/регистрации или для отображения простого сообщения посетителю.
модальный · Bootstrap
Используйте модальный плагин Bootstrap JavaScript, чтобы добавить на свой сайт диалоги для лайтбоксов, пользовательских уведомлений или полностью настраиваемого контента.
Как это работает
Прежде чем приступить к работе с модальным компонентом Bootstrap, обязательно прочитайте следующее, так как параметры нашего меню недавно изменились.
Модальные окна создаются с использованием HTML, CSS и JavaScript. Они располагаются поверх всего остального в документе и удаляют прокрутку из , чтобы модальное содержимое прокручивалось.
Щелчок по модальному фону автоматически закроет модальное окно.
Bootstrap одновременно поддерживает только одно модальное окно. Вложенные модальные окна не поддерживаются, так как мы считаем их неудобными для пользователей.
Модальные окна используют position: fixed , что иногда может быть немного специфичным при рендеринге. По возможности размещайте свой модальный HTML на верхнем уровне, чтобы избежать возможных помех от других элементов. Вы, вероятно, столкнетесь с проблемами при вложении .modal внутри другого фиксированного элемента.
Еще раз, из-за позиции : исправлено , есть некоторые предостережения при использовании модальных окон на мобильных устройствах. Для получения подробной информации см. нашу документацию по поддержке браузера.
Из-за того, как HTML5 определяет свою семантику, HTML-атрибут autofocus не действует в модальных окнах Bootstrap. Чтобы добиться того же эффекта, используйте собственный код JavaScript:
.
$('#myModal').on('show.bs.modal', функция () {
$('#myInput').триггер('фокус')
})
Читайте демонстрационные версии и рекомендации по использованию.
Примеры
Модальные компоненты
Ниже приведен пример статического режима (это означает, что его позиция и отображение были переопределены). Включены модальный заголовок, модальное тело (требуется для заполнения ) и модальный нижний колонтитул (необязательно). Мы просим вас включать модальные заголовки с действиями закрытия, когда это возможно, или предоставлять другое явное действие закрытия.
Здесь находится модальный основной текст.
<дел>
<дел>
Модальное название
<дел>
Сюда идет модальный основной текст.
<дел>
Живая демонстрация
Включите работающую модальную демонстрацию, нажав кнопку ниже. Он будет скользить вниз и исчезать в верхней части страницы.
Ууху, вы читаете этот текст в модальном режиме!
Прокрутка длинного содержимого
Когда модальные окна становятся слишком длинными для области просмотра или устройства пользователя, они прокручиваются независимо от самой страницы. Попробуйте демо ниже, чтобы увидеть, что мы имеем в виду.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, вестибюль и эрос.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Энейская 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.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, вестибюль и эрос.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Энейская 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.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, вестибюль и эрос.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Энейская 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.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, вестибюль и эрос.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Энейская 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.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, вестибюль и эрос.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Энейская 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.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, вестибюль и эрос.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Энейская 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.
Вертикально центрированный
Добавьте .modal-dialog-centered к .modal-dialog для вертикального центрирования модального окна.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, вестибюль и эрос.
Подсказки и всплывающие окна
Всплывающие подсказки и всплывающие окна могут быть размещены в модальных окнах по мере необходимости. Когда модальные окна закрыты, любые всплывающие подсказки и всплывающие окна также автоматически закрываются.
Всплывающее окно в модальном окне
Эта кнопка вызывает всплывающее окно при нажатии.
Всплывающие подсказки в модальном окне
Эта ссылка и та ссылка имеют всплывающие подсказки при наведении.
<дел>
Всплывающее окно в модальном окне
Эта кнопка вызывает всплывающее окно при нажатии.< /p>
<час>
Используйте сетку Bootstrap внутри модального окна, вложив .container-fluid в .modal-body . Затем используйте обычные классы системы сетки, как и везде.
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
.col-md- 6 .мл-авто
Уровень 1: .col-sm-9
Уровень 2: .col-8 .col-sm-6
Уровень 2: .col-4 .col-sm-6
<дел>
<дел>
<дел>
.col-md-4
.col-md-4 .ml-auto
<дел>
.col-md-3 .ml-auto
.col-md-2 .ml-auto
<дел>
.col-md-6 .ml-auto
<дел>
<дел>
Уровень 1: .col-sm-9
<дел>
<дел>
Уровень 2: .col-8 .col-sm-6
<дел>
Уровень 2: .col-4 .col-sm-6
Различное модальное содержание
У вас есть куча кнопок, которые запускают одно и то же модальное окно с немного разным содержимым? Используйте атрибуты event. relatedTarget и HTML data-* (возможно, через jQuery), чтобы изменять содержимое модального окна в зависимости от того, какая кнопка была нажата.
Ниже приведена живая демонстрация, за которой следуют примеры HTML и JavaScript. Для получения дополнительной информации ознакомьтесь с документацией по модальным событиям для получения подробной информации о relatedTarget .
Получатель:
Сообщение:
<дел>
<дел>
Новое сообщение
<дел>
<форма>
<дел>
<тип ввода="текст">
<дел>
<текстовое поле>
<дел>
$('#exampleModal'). on('show.bs.modal', функция (событие) {
var button = $(event.relatedTarget) // Кнопка, активировавшая модальное окно
var Receiver = button.data('whatever') // Извлечение информации из атрибутов data-*
// При необходимости здесь можно инициировать AJAX-запрос (а затем выполнить обновление в обратном вызове).
// Обновить содержимое модального окна. Здесь мы будем использовать jQuery, но вместо этого вы можете использовать библиотеку привязки данных или другие методы.
переменная модальная = $(это)
modal.find('.modal-title').text('Новое сообщение для ' + получателя)
modal.find('.modal-body input').val(получатель)
})
Удалить анимацию
Для модальных окон, которые просто появляются, а не исчезают при просмотре, удалите класс .fade из разметки модального окна.
...
Динамические высоты
Если высота модального окна изменяется, когда оно открыто, вы должны вызвать $('#myModal'). modal('handleUpdate') , чтобы изменить положение модального окна в случае появления полосы прокрутки.
Доступность
Обязательно добавьте role="dialog" и aria-labelledby="..." , ссылаясь на заголовок модального окна, к .modal и role="document" к .modal- сам диалог . Кроме того, вы можете дать описание вашего модального диалога с aria-describedby на .modal .
Встраивание видео с YouTube
Для встраивания видео YouTube в модальные окна требуется дополнительный JavaScript, не входящий в Bootstrap, для автоматической остановки воспроизведения и т. д. См. этот полезный пост о переполнении стека для получения дополнительной информации.
Дополнительные размеры
Модальные окна
имеют два дополнительных размера, доступных через классы модификаторов, которые можно поместить в .modal-dialog . Эти размеры срабатывают в определенных точках останова, чтобы избежать горизонтальных полос прокрутки на более узких окнах просмотра.
<дел>
<дел>
...
<дел>
<дел>
...
Использование
Модальный плагин переключает ваш скрытый контент по запросу, через атрибуты данных или JavaScript. Он также добавляет .modal-open к , чтобы переопределить поведение прокрутки по умолчанию, и генерирует .modal-backdrop , чтобы обеспечить область щелчка для закрытия отображаемых модальных окон при нажатии вне модального окна.
Через атрибуты данных
Активировать модальное окно без написания JavaScript. Установите data-toggle="modal" на элемент контроллера, например кнопку, вместе с data-target="#foo" или href="#foo" для выбора определенного модального окна для переключения.
Через JavaScript
Вызвать модальное окно с идентификатором myModal с помощью одной строки JavaScript:
$('#myModal').modal(options)
Параметры
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data- , как и data-backdrop="" .
Имя
Тип
По умолчанию
Описание
фон
логическое значение или строка 'static'
правда
Включает элемент модального фона. В качестве альтернативы укажите static для фона, который не закрывает модальное окно при нажатии.
клавиатура
логическое значение
правда
Закрывает модальное окно при нажатии клавиши выхода
фокус
логическое значение
правда
При инициализации фокусируется на модальном окне.
показать
логическое значение
правда
Показывает модальное окно при инициализации.
Методы
Асинхронные методы и переходы
Все методы API являются асинхронными и запускают переход . Они возвращаются к вызывающей стороне, как только переход начинается, но до его завершения . Кроме того, вызов метода для переходного компонента будет игнорироваться .
Дополнительные сведения см. в нашей документации по JavaScript.
.modal(варианты)
Активирует ваш контент как модальный. Принимает необязательные параметры объекта .
$('#myModal').modal({
клавиатура: ложь
})
.modal('переключатель')
Вручную переключает модальное окно. Возвращает вызывающему объекту до того, как модальное окно действительно было показано или скрыто (т. е. до того, как произойдет событие visible.bs.modal или hidden.bs.modal ).
$('#myModal').modal('переключатель')
.modal('show')
Вручную открывает модальное окно. Возврат к вызывающей стороне до того, как модальное окно действительно было показано (т. е. до того, как произойдет событие , показанное.bs.modal ).
$('#myModal').modal('показать')
. modal('скрыть')
Вручную скрывает модальное окно. Возвращает вызывающему объекту до того, как модальное окно было фактически скрыто (т. е. до того, как произойдет событие hidden.bs.modal ).
$('#myModal').modal('скрыть')
.modal('handleUpdate')
Вручную отрегулируйте положение модального окна, если высота модального окна изменяется, когда оно открыто (например, в случае появления полосы прокрутки).
$('#myModal').modal('handleUpdate')
.modal('dispose')
Уничтожает модальное окно элемента.
События
Модальный класс Bootstrap предоставляет несколько событий для подключения к модальным функциям. Все модальные события запускаются в самом модальном окне (т.е. в
css
css, jquery.js 
По возможности размещайте свой модальный HTML на верхнем уровне, чтобы избежать возможных помех от других элементов. Вы, вероятно, столкнетесь с проблемами при вложении
Включены модальный заголовок, модальное тело (требуется для
Donec ullamcorper nulla non metus auctor fringilla. 
Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 
Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. 
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, вестибюль и эрос. 
Когда модальные окна закрыты, любые всплывающие подсказки и всплывающие окна также автоматически закрываются. 
relatedTarget 
on('show.bs.modal', функция (событие) {
var button = $(event.relatedTarget) // Кнопка, активировавшая модальное окно
var Receiver = button.data('whatever') // Извлечение информации из атрибутов data-*
// При необходимости здесь можно инициировать AJAX-запрос (а затем выполнить обновление в обратном вызове).
// Обновить содержимое модального окна. Здесь мы будем использовать jQuery, но вместо этого вы можете использовать библиотеку привязки данных или другие методы.
переменная модальная = $(это)
modal.find('.modal-title').text('Новое сообщение для ' + получателя)
modal.find('.modal-body input').val(получатель)
}) 
modal('handleUpdate') 
В качестве альтернативы укажите 
modal('скрыть') 