14 модальных диалоговых окон jQuery — SitePoint
отличных модальных jQuery-модальных диалоговых окон или окон можно быстро показать пользователям. Диалоговые окна также можно использовать для оповещения о предупреждениях, ошибках и многом другом. Если все сделано правильно, красиво выглядящие диалоги могут стать простым способом сделать ваш сайт более современным без дополнительной работы.
Многие фреймворки, такие как Twitter Bootstrap или Zurb Foundation, содержат модальные окна и диалоги. Однако, если все, что вам нужно, — это красиво выглядящее, простое в использовании модальное окно без создания собственного с нуля, существует множество библиотек, которые помогут вам.
Вот несколько модальных диалоговых окон, наслаждайтесь!
Обновление от 12 декабря 2013 г.: Обновлены все плагины в этом посте и добавлены новые образы демо. Удалены недостающие плагины и добавлены новые.
Сейчас есть 18 достойных.
Обновление 10 марта 2016 г.: Список плагинов полностью обновлен и обновлен. Если вы еще не используете jQuery, перейдите к бонусному разделу для библиотек JavaScript, которым он не требуется!
1. vex
Легко настраиваемый, легко настраиваемый и готовый для мобильных устройств, vex доставляет удовольствие в использовании. Начните использовать vex в своих проектах как простую замену, не конфликтуя с другими библиотеками или плагинами, которые вы могли установить. Придайте вашему сайту современный вид.
Домашняя страница/Демо | GitHub
2.animatedModal.js
animatedModal.js — это плагин jQuery для создания полноэкранного модального окна с переходами CSS3. Вы можете использовать переходы из animate.css или создавать свои собственные переходы.
Домашняя страница/Демо | GitHub
3. Remodal
Remodal — это отзывчивый, легкий и полностью настраиваемый подключаемый модуль модального окна с декларативной конфигурацией и отслеживанием хэшей.
Вы также можете определить фоновый контейнер для модального окна (для создания таких эффектов, как размытие). Он также поддерживает IE8.
Домашняя страница/Демо | GitHub
4. Avgrund Modal
Ищете что-то немного другое? Авгрунд может тебя прикрыть. Настройки по умолчанию создают уникальный эффект, который добавляет анимацию не только в модальное окно, но и на саму страницу, элегантно создавая иллюзию глубины. Лучший способ увидеть, как это выглядит, — это проверить демо по ссылкам ниже для себя.
Домашняя страница/Демо | GitHub
5. noty
Кто сказал, что модальные окна нужно располагать по центру? По умолчанию ноты находятся на одном уровне с верхом экрана (с возможностью легко установить различные положения). Другие модальные диалоги могут достичь этого эффекта, так что это не обязательно уникально, но noty делает его очень простым в настройке.
Домашняя страница/Демо | GitHub
6. Lean Modal
Если вы используете jQuery, но все еще хотите что-то легкое, Lean Modal будет простым и подлым.
Всего 1 КБ, без дополнительного CSS, вы даже не заметите Lean Modal.
Домашняя страница/Демо | GitHub
7. jQuery Popdown
Устали от всплывающих окон? Попробуйте спуститься вниз для разнообразия. JQuery Popdown по умолчанию и только анимация появляется сверху и в нашем списке. Недостаток документации и настраиваемости компенсируется простотой.
Домашняя страница/Демо | GitHub
8. Диалог пользовательского интерфейса jQuery
Пользовательский интерфейс jQuery — это хорошо поддерживаемая, широко используемая, легко настраиваемая и облегченная структура внешнего интерфейса на основе jQuery. Вся структура включает в себя гораздо больше, чем просто модальные окна, но если все, что вам нужно, это диалоговые окна, каждый модуль структуры можно легко использовать по отдельности со страницы загрузки.
Домашняя страница/Демо | GitHub
9. Colorbox
Разработанный как плагин лайтбокса для отображения изображений, Colorbox может элегантно удовлетворить потребности как лайтбокса, так и модальной диалоговой системы.
Домашняя страница/Демо | GitHub
10. BlockUI
Хотя каждый плагин в этом списке поддерживает Ajax, BlockUI создан для него. Это позволяет разработчикам имитировать синхронное поведение с помощью Ajax без блокировки браузера. BlockUI добавляет элементы в DOM, чтобы придать ему внешний вид и поведение, блокирующие взаимодействие с пользователем.
Домашняя страница/Демо | GitHub
11. jQuery Modal
Недостаток креативного именования компенсируется поддержкой браузера. В документации утверждается даже поддержка текстового браузера Lynx. Но не смущайтесь, jQuery Modal не является частью проекта jQuery.
Домашняя страница/Демо | GitHub
12. nyroModal
Нравится ли вам настройка? Что ж, позвольте мне представить nyroModal. Многие из других плагинов в этом списке допускают большую настройку, но nyroModal спроектирован таким образом, чтобы предоставить разработчику большую свободу, вплоть до анимации.
Домашняя страница/Демо | GitHub
13. jqModal
Всего около 375 строк кода, включая комментарии, исходный код jqModal очень простой и понятный. Это отличный вариант, если вы хотите самостоятельно копаться в исходном коде.
Домашняя страница/Демо | GitHub
14. Диалог Zebra
Плоская тема по умолчанию на Zebra выглядит фантастически, однако не стесняйтесь настраивать свои собственные!
Домашняя страница/Демо | GitHub
Бонус: rmodal
Хотите что-то, что не использует jQuery, но при этом легкое и выглядит великолепно? Возможно, вы нашли того, кого искали. Имея размер 3 КБ и не завися от jQuery, rmodal является самым легким вариантом в нашем списке.
Домашняя страница/Демо | GitHub
Бонус: SweetAlert
SweetAlert может быть не самым легким модальным окном в нашем списке (17 КБ), но оно самое популярное. Однако для этого не нужен jQuery. Если ваш сайт небольшой и единственная причина, по которой вы рассматриваете jQuery, — это добавить диалоговое окно, 17 КБ намного меньше, чем вся библиотека jQuery, которая может занимать сотни килобайт.
Sweet Alert тоже выглядит действительно великолепно.
Домашняя страница/Демо | Гитхаб
9Stack Overflow на русском rap-list-group…Попробуйте добавить max-height : .list-group{ максимальная высота: 300 пикселей; нижняя граница: 10px; переполнение: прокрутка; -webkit-overflow-scrolling: сенсорный; }
Bootstrap 4, сделать список-группу прокручиваемой, подряд, с помощью flexbox, с помощью или …
Bootstrap list-group переполняет всю высоту контейнера
CSS — Как сделать динамический список начальной загрузки прокручиваемым
Как я могу создать список начальной загрузки с полосой прокрутки?
Добавлено на stackoverflow.com
Scrollspy · Bootstrap v4.6
getbootstrap.com › docs › 4.6 › components › scroll…
Автоматически обновлять навигацию Bootstrap или компоненты списка групп на основе положения прокрутки указать какая ссылка в данный момент активна в области просмотра.
Как это работает · Пример с вложенной навигацией · Пример со списком-группой · Использование
Переполнение — Bootstrap
getbootstrap.com › docs › 4.3 › утилиты › переполнение
По замыслу это содержимое будет прокручиваться вертикально. Это пример использования .overflow-hidden для элемента с заданными размерами ширины и высоты.
Scrollspy — Bootstrap
getbootstrap.com › docs › 4.0 › компоненты › scroll…
Автоматически обновлять навигацию Bootstrap или компоненты группы списка на основе положения прокрутки, чтобы указать, какая ссылка в настоящее время активна в области просмотра.
Как это работает · Пример с вложенной навигацией · Пример со списком-группой · Использование
Группа списков — Bootstrap
getbootstrap.com › docs › 4.0 › компоненты › list-g… гибкий и мощный компонент для отображения серии контента. Модифицируйте и расширяйте их для поддержки практически любого содержимого внутри.
Ссылки и кнопки · Контекстные классы · Пользовательский контент · Поведение JavaScript
Ähnliche Fragen
Как сделать список прокручиваемым в Bootstrap?
Как создать полосу прокрутки в Bootstrap 4?
Как сделать div прокручиваемым в Bootstrap 4?
Как создать прокручиваемый список?
Scrollspy · Bootstrap v5.0
getbootstrap.com › документы › компоненты › scrollspy
Автоматически обновлять компоненты навигации или списка групп Bootstrap на основе положения прокрутки, чтобы указать, какая ссылка в настоящее время активна в области просмотра.
Bootstrap 4 Scrollspy — W3Schools
www.w3schools.com › bootstrap4 › bootstrap_scroll…
Bootstrap 4 Scrollspy. Scrollspy используется для автоматического обновления ссылок в списке навигации в зависимости от положения прокрутки. Секция 1; Раздел 2; Раздел 3 …
Прокрутка таблицы Bootstrap 4 — примеры и руководство.
mdbootstrap.