10 безкоштовних модульних вікон JavaScript

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

Але, чому дизайн щось з нуля, коли Ви можете використовувати бібліотеку JS? Я зібрав кращі безкоштовні модальні сценарії з підтримкою JavaScript тут для перегляду та виділення ваших улюблених.

Всі вони є абсолютно вільний і відкритий, щоб ви могли редагувати код і перетворювати їх на свій сайт відповідно до необхідності.

1. Тингл

Один з моїх улюблених вільних модальних сценаріїв Tingle.js. Його побудований на ванільному JavaScript без залежностей, тому вам не потрібні бібліотеки jQuery або Zepto.

Крім того, це досить невелика бібліотека, хоча і є багато варіантів налаштування. Ви можете змінити переходи CSS, модальні анімації JavaScript і весь досвід користувача лише за допомогою кількох налаштувань.

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

Ти можеш бачити всю документацію на GitHub, разом з безкоштовним вихідним кодом. Вони також мають демо-посилання, тому ви можете перевірити Tingle в дії щоб дізнатися, чи може він вміститися на вашому веб-сайті.

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

Ось модальний, який я недавно знайшов, і це набагато простіше, ніж більшість. Ванільний модал відповідає своєму імені з a чистий скрипт ванілі включення модального, разом з Переходи CSS.

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

Подивіться на Демонстраційна сторінка , щоб побачити стиль за замовчуванням. Це дійсно базовий дизайн, тому він буде вимагати налаштування для використання на виробничому сайті. Але це також зменшує загальні вимоги до коду, так що це одна з найтонших модальних бібліотек JavaScript.

3. звичайниймодальний

Якщо ви хочете дійсно простий сценарій, я дуже рекомендую звичайниймодальний. це є побудований на jQuery, але це один з найменших доступних модальних сценаріїв.

Це робить не використовувати будь-які зовнішні CSS або файли зображень. Тільки один сценарій JS - це все, що вам потрібно.

Після додавання сценарію plainModal до вашої сторінки ви просто націлюйте на кнопку модальної і ти добре йти. Це дає вам можливість контролювати відображення і скільки ви хочете змінити модальний інтерфейс.

Плюс, ви можете налаштувати модаль одним рядком JavaScript дотримуючись мінімалістської теми цього плагіна.

4. Модаал

Немає жодного заперечення доступність величезна в Інтернеті. Мета кожного дизайнера повинна бути більш інклюзивний досвід для людей по всьому світу на різних пристроях і з можливими обмеженнями.

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

Загалом, я рекомендую цей плагін для ванільного JavaScript для тих, хто дійсно дбає про доступність. Рейтинг АА може знадобитися на деяких веб-проектах, тому Modaal є дуже зручним сценарієм, щоб зберігати закладки.

5. Скотч JS Modal

Команда розробників Scotch.io публікує навчальні посібники та посібники для кодерів. Їхня робота неймовірна, і вона дійсно проявляється цей модальний сценарій JavaScript, розміщений на Scotch GitHub.

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

6. Bootbox.js

Найшвидший шлях запустити новий веб-проект через Bootstrap. Це потужна фронтенда, що заохочує розробників створити власні додатки до бібліотеки.

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

Типові діалогові вікна JavaScript страшні, подібно до вікон сповіщення. Сценарій Bootbox пропонує a солідна альтернатива для тих, хто працює в екосистемі BS3 / BS4.

Знову ж таки, це абсолютно вільний і відкритий, разом з довга сторінка документації щоб ви швидко працювали.

7. iziModal.js

Якщо ви потрібне рішення трохи більше налаштувати перевіряти iziModal.js. Цей інструмент є повністю реагує і призначений для прекрасно працювати у всіх сучасних браузерах.

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

Відзначте цей плагін працює на jQuery, так що це один з небагатьох, що тут має залежність. Але, якщо ви хочете, щоб стилі iziModal були невеликими, ви платите за такі гладкі вікна.

8. Модуль jQuery

The Модульний плагін jQuery можливо, це Найпростіший модальний скрипт на jQuery, який ви коли-небудь знайдете.

Його можна запрограмувати автоматично зв'язується з певними елементами HTML на основі різних атрибутів. Він також підтримує сполучення клавіш наприклад, ESC для закриття вікна.

Загалом цей плагін заходи менше 1КБ і це працює в усіх можливих браузерах. Розробники jQuery повинні зберігати цей плагін для швидкого доступу до простого модального сценарію без додаткових надмірностей.

9. PicoModal

Повертаючись до ванільного JavaScript, у нас є Бібліотека PicoModal. Це, мабуть, один з найменших скриптів, який ви знайдете, і він призначений ідеально працювати на ванілі магістральної JavaScript.

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

Розробник PicoModal створив невеликий скрипт JSfiddle продемонструвати, як він працює. Це дуже маленький приклад, і це не прив'язана до події натискання або що-небудь ще, але це не важко сценарій у декількох кнопках перемикання для правильного запуску цього модального вікна.

10. Авгрунд

Avgrund це, мабуть, один з найбільш унікальних моделей у цьому списку. Він використовує a користувальницький ефект вицвітання сторінки, а також скорочення анімації привести модальне право на погляд.

Не всі оцінять цю анімацію, тому я не можу сказати, що цей сценарій відповідає кожному сайту. Але це чистий ванільний модал і це дуже легко налаштувати, тільки з CSS і JavaScript file.

Погляньте на Демонстраційна сторінка щоб побачити, як він працює. Це звичайно отримало унікальний стиль та зобов'язані привернути увагу із спеціальними анімаціями, які просто працюють.

Заключні слова

Незалежно від того, що ви шукаєте, я думаю, що в цьому списку є щось, що відповідає вашим потребам. Але, якщо ви все ще не задоволені переглядайте GitHub для відповідних модальних сценаріїв і подивитися, що ще можна знайти.