10 бесплатных плагинов для модальных окон JavaScript

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

Но зачем создавать что-то с нуля, когда вы можете использовать библиотеку JS? Я собрал здесь лучшие бесплатные модальные скрипты на основе JavaScript, чтобы вы могли просмотреть и выделить ваши любимые.

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

Читайте также: Как создать эффективные всплывающие окна для вашего интернет-магазина

1. покалывание
   Один из моих любимых бесплатных модальных сценариев Tingle.js, Он построен на ванильном JavaScript без каких-либо зависимостей, поэтому вам не нужны библиотеки jQuery или Zepto.

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

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

Вы можете увидеть всю документацию на GitHubвместе с бесплатным исходным кодом. У них также есть демонстрационная ссылка, так что вы можете проверить Tingle в действии, чтобы увидеть, может ли она поместиться на вашем сайте.
2. Ванильный модал
Вот модал, который я недавно нашел, и он намного проще, чем большинство. Ванильный Модал остается верным своему названию с чистым ванильным сценарием, приводящим модальное в движение наряду с переходами CSS.

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

Взгляните на демонстрационная страница чтобы увидеть стиль по умолчанию. Это действительно базовый дизайн, поэтому для его использования на рабочем месте потребуются настройки. Но это также сокращает общие требования к коду, поэтому это одна из самых тонких модальных библиотек JavaScript.
3. plainModal
Если вы хотите действительно простой скрипт, я очень рекомендую plainModal, Он построен на jQuery, но это один из самых маленьких модальных сценариев.

Он не использует внешние CSS или файлы изображений. Все, что вам нужно – это всего лишь один JS-скрипт.

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

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

С Modaalвы получаете тот превосходный опыт, который проходит тест WCAG 2.0 с солидным рейтингом доступности AA. Вы можете увидеть фантастический пример на Главная страницавместе с некоторой документацией по коду.

В общем, я рекомендую этот ванильный плагин JavaScript для всех, кто действительно заботится о доступности. Для некоторых веб-проектов может потребоваться рейтинг АА, поэтому Modaal – это действительно удобный скрипт для добавления в закладки.
5. Скотч JS Модал
Команда разработчиков в Scotch.io публиковать учебные пособия и руководства для программистов. Их работа невероятна, и это действительно показывает этот JavaScript модальный скрипт, размещенный на шотландском GitHub.

Модал был разработан Кеном Уилером, и у этого сценария даже есть полный учебник если вы хотите узнать, как это работает. Тем не менее, бесплатного кода должно быть достаточно для большинства разработчиков, так как он очень легкий и простой в настройке. Никаких зависимостей и даже образец демо на CodePen.
6. Bootbox.js
Самый быстрый способ запустить новый веб-проект – через Bootstrap. Это мощная среда интерфейса, которая поощряет разработчиков создавать свои собственные дополнения к библиотеке.

Одним из таких примеров является Bootbox.jsнебольшая библиотека JavaScript, предназначенная исключительно для модальных окон в Bootstrap. Это на самом деле работает в диалоговых окнах, где пользователь может нажать кнопку ОК или отменить, в зависимости от вашего запроса.

Типичные JavaScript-диалоги ужасны, как окна предупреждений. Скрипт Bootbox предлагает надежную альтернативу для всех, кто работает в экосистеме BS3 / BS4.

Опять же, это абсолютно бесплатно и с открытым исходным кодом, наряду с длинная страница документации чтобы вы работали быстрее.
7. iziModal.js
Если вам нужно решение немного более индивидуально, проверьте iziModal.js, Этот инструмент полностью адаптивен и отлично работает во всех современных браузерах.

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

Просто обратите внимание, что этот плагин работает на jQuery, поэтому он один из немногих, у которого есть зависимость. Но если вы хотите стили iziModal, за такие гладкие всплывающие окна стоит заплатить небольшую цену.
8. JQuery Модал
jQuery Модальный плагин возможно, самый простой модальный скрипт на jQuery, который вы когда-либо найдете.

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

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

Он поддерживает все современные браузеры, включая мобильные браузеры для Android и Mobile Safari для iOS. Он даже поддерживает старые браузеры IE, начиная с IE7!

Разработчик PicoModal создал небольшой Скрипт JSfiddle чтобы продемонстрировать, как это работает. Это очень маленький пример, и он не привязан к событию щелчка или чему-либо еще, но нетрудно написать скрипт с помощью нескольких кнопок переключения, чтобы правильно запустить это модальное окно.
10. Avgrund
Avgrund это, вероятно, один из самых уникальных модалей в этом списке. Он использует пользовательский эффект затухания страницы, а также уменьшающуюся анимацию, чтобы вывести модальное изображение прямо в поле зрения.

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

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

Читайте также: Создание модального окна легко с помощью HTML5 Dialog