Вы можете найти много чистых модалов CSS, но они не предлагают тот же элемент управления, что и JavaScript. С помощью модала JavaScript можно добавлять пользовательские анимации, входные данные пользовательского интерфейса и действительно улучшать пользовательский опыт.
Но, зачем создавать что-то с нуля, когда вы можете использовать библиотеку JS? Мы собрали лучшие бесплатные модальные скрипты JavaScript здесь для вас, чтобы вы могли их изучить и выделить ваши любимые.
Все они совершенно бесплатные и с открытым исходным кодом, так что вы можете редактировать код и переделывать его в соответствии с вашим сайтом по мере необходимости.
Одним из самых любимых бесплатных модальных скриптов является Tingle.js. Он построен на ванильном JavaScript без зависимостей, поэтому вам не нужны библиотеки jQuery или Zepto.
Кроме того, это довольно небольшая библиотека, хотя у нее есть много вариантов настройки. Вы можете изменить CSS-переходы, модальную анимацию JavaScript и весь пользовательский интерфейс всего несколькими настройками.
Tingle.js разработан, чтобы быть полностью доступным и отзывчивым, поэтому он работает на мобильных устройствах и поддерживает более старые браузеры.
Вы можете увидеть всю документацию на GitHub вместе со свободным исходным кодом. У них также есть демо-ссылка, поэтому вы можете проверить Tingle в действии, чтобы узнать, может ли он поместиться на вашем сайте.
Вот модал, который мы недавно нашли, и это намного проще, чем большинство других. Vanilla Modal оправдывает свое название чистым ванильным скриптом, управляющим модалом, а также переходами CSS.
Эта вещь довольно маленькая и супер гибкая, с пользовательским CSS для восстановления окон. В нем также есть несколько вариантов, которые вы можете изменить с помощью JavaScript, что делает его идеальным для выполнения функций DOM или даже функций обратного вызова.
Посмотрите на демонстрационную страницу, чтобы увидеть стиль по умолчанию. Это на самом деле базовый дизайн, поэтому для его использования потребуются настройки на производственном сайте. Но он также снижает общие требования к коду, так что это одна из самых тонких модальных библиотек JavaScript.
Многие веб-разработчики ненавидят оповещения JavaScript по умолчанию, потому что они просто раздражают и навязчивы. В эту эпоху веб-дизайна нам просто не нужны предупреждения браузера по умолчанию, особенно со сценариями, такими как SweetAlert2.
Эта бесплатная библиотека JavaScript поставляется с нулевыми зависимостями и работает так же, как модальное окно. Тем не менее, она поддерживает OK/Отмена ввода от пользователя, так что вы можете разработать их и использовать, как окна оповещения, тоже.
Вам не понадобятся никакие другие скрипты, так что SweetAlert2 работает довольно легко. Взгляните на демо, чтобы увидеть, как модалы выглядят на реальной веб-странице. SweetAlert2 является идеальным решением для стильных модальных окон оповещения.
Если вы хотите действительно простой сценарий мы настоятельно рекомендуем plainModal. Он построен на jQuery, но это один из самых доступных маленьких модальных скриптов.
Он не использует каких-либо внешних CSS или файлы изображений. Только один JS скрипт все, что вам нужно.
После добавления скрипта plainModal на страницу, вы просто нацеливаете на модальную кнопку, и вы готовы идти. Это дает вам контроль над дисплеем, и вы можете, сколько захотите изменять модальный интерфейс. Кроме того, вы можете настроить модал с одной строкой JavaScript, сохраняя минималистскую тему этого плагина.
В Интернете нет никаких препятствий для доступности. Цель каждого дизайнера должна быть более инклюзивным опытом для людей во всем мире на различных устройствах и с возможными ограничениями.
С Modaal вы получаете тот прекрасный опыт, который проходит тест WCAG 2.0 с надежным рейтингом AA. Вы можете увидеть фантастический пример на главной странице, а также некоторую документацию по коду.
В целом, мы рекомендуем этот ванильный плагин JavaScript для всех, кто действительно заботится о доступности. Оценка AA может потребоваться в некоторых веб-проектах, поэтому Modaal — это на самом деле удобный скрипт, который стоит сохранить в закладках.
Команда разработчиков Scotch.io публикует учебники и руководства для кодеров. Их работа невероятна, и это действительно продемонстрировано в данном модальном скрипте JavaScript, размещенном на GitHub.
Модал был разработан Кеном Уилером, и этот скрипт даже имеет полноценный учебник, если вы хотите узнать, как он работает. Тем не менее, свободного кода должно быть достаточно для большинства разработчиков, поскольку он суперлегкий и простой в настройке. Никаких зависимостей и даже образец демонстрации на CodePen.
Самый быстрый способ запустить новый веб-проект — через Bootstrap. Это мощная инфраструктура интерфейса, которая побуждает разработчиков создавать свои собственные надстройки в библиотеке.
Одним из таких примеров является Bootbox.js, небольшая библиотека JavaScript, предназначенная исключительно для модальных окон в Bootstrap. Она фактически работает в диалоговых окнах, где пользователь может нажать «ОК» или «Отменить», исходя из вашего запроса.
Типичные диалоги для JavaScript ужасны, как окна предупреждений. Скрипт Bootbox предлагает надежную альтернативу для всех, кто работает в экосистеме BS3 / BS4.
Опять же, он совершенно бесплатный и с открытым исходным кодом, а также длинной страницей документации.
Если вам нужно какое-то решение, немного более настраиваемое, тогда проверьте iziModal.js. Этот инструмент полностью отзывчивый и идеально подходит для работы во всех современных браузерах.
Мы еще не нашли другой модальный скрипт, который предлагает такой эстетически приятный дизайн. Он имеет великолепный пользовательский интерфейс, который может вписаться в практически любой сайт. Однако вы также можете создать дизайн в соответствии с вашими потребностями.
Просто обратите внимание, что этот плагин работает на jQuery, поэтому он один из немногих, у которого есть зависимости. Но, если вы хотите стили iziModal, это небольшая цена для таких гладких окон.
Плагин jQuery Modal — это, пожалуй, самый простой модальный скрипт jQuery, который вы когда-либо найдете.
Он может быть запрограммирован для автоматической привязки к определенным HTML-элементам на основе различных атрибутов. Он также поддерживает быстрые клавиши, такие как ESC для закрытия окна.
В общем, этот плагин имеет менее 1 КБ, и он работает во всех возможных браузерах, которые вы можете себе представить. Разработчики jQuery должны сохранять этот плагин для быстрого доступа к простому модальному скрипту без лишних излишеств.
Возвращаясь к ванильному JavaScript, у нас есть библиотека PicoModal. Это, вероятно, один из самых маленьких скриптов, который вы найдете, и он идеально подходит для работы на базе ванильного JavaScript.
Он поддерживает все современные браузеры, в том числе мобильные браузеры для Android и Mobile Safari для iOS. Скрипт даже поддерживает старые браузеры IE, относящиеся к IE7!
Разработчик PicoModal создал небольшой скрипт JSfiddle, чтобы продемонстрировать, как он работает. Это очень маленький пример, и он не привязан к какому-то событию или чему-то еще.
Avgrund, пожалуй, один из самых уникальных модалов в этом списке. Он использует пользовательский эффект увядания страницы, наряду с уменьшением анимации, чтобы отобразить модал.
Не все оценят такую анимацию, поэтому мы не можем сказать, что этот скрипт будет соответствовать каждому сайту. Но, это чистый ванильный модал и его очень легко настроить с помощью файлов CSS и Javascript.
Взгляните на демо-страницу, чтобы увидеть, как он работает. У него, конечно, имеется уникальный стиль, и он обязан привлечь внимание с помощью своей пользовательской анимации, которые отлично работают.
В заключении
Независимо от того, что вы ищете, мы уверены, что в этом списке есть скрипт, который удовлетворит ваши потребности. Но если вы вдруг решили, что вам ничего не подходит, значит, стоит пересмотреть список еще раз.
0 комментариев