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

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

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

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

1. Тингл

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

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

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

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

2. Ванильный модал

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

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

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

3. plainModal

Если вы хотите действительно простой скрипт, я очень рекомендую plainModal. это построен на JQuery, но это один из самых маленьких модальных скриптов.

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

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

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

4. Модал

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

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

В целом, я рекомендую этот ванильный плагин JavaScript для тех, кто действительно заботится о доступности. Для некоторых веб-проектов может потребоваться рейтинг АА, поэтому Modaal - действительно удобный скрипт для добавления в закладки.

5. Скотч Дж. С. Модал

Команда разработчиков Scotch.io публикует учебники и руководства для программистов. Их работа невероятна, и это действительно показывает этот модальный скрипт JavaScript, размещенный на Scotch GitHub.

Модал был разработан Кеном Уилером, и этот сценарий даже имеет полный учебник если вы хотите узнать, как это работает. Тем не менее, свободного кода должно быть достаточно для большинства разработчиков, так как это супер легкий и простой в настройке. Никаких зависимостей и даже пример демонстрации на CodePen.

6. Bootbox.js

Самый быстрый способ запустить новый веб-проект через Bootstrap. Это мощная среда интерфейса, которая поощряет разработчиков создавать свои собственные дополнения к библиотеке.

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

Типичные 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 вероятно, один из самых уникальных модалей в этом списке. Он использует пользовательский эффект затухания страницы вместе с уменьшающейся анимацией чтобы показать модальный вид.

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

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

Заключительные слова

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