10 безплатни JavaScript модулни плъгини за прозорци

Можете да намерите много чисти CSS модели но тези не предлагат същия контрол като JavaScript. С модален JavaScript можете да добавяте персонализирани анимации, входове на потребителския интерфейс и наистина да подобрите потребителския опит.

Но защо проектирате нещо от нулата можете да използвате JS библиотека? Събрал съм най-добрите безплатни модални скриптове с JavaScript тук, за да прочетете и да откроите любимите си.

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

1. Тингъл

Един от любимите ми модални скриптове е Tingle.js. е построена на vanilla JavaScript без никакви зависимости, така че не се нуждаете от библиотеки jQuery или Zepto.

Плюс това, това е доста малка библиотека, въпреки че има много опции за персонализиране. Можете да промените CSS преходите, модалните анимации на JavaScript и целия потребителски опит само с няколко настройки.

Tingle.js е проектиран да бъде напълно достъпни и отзивчиви, така че работи на мобилни устройства и поддържа и по-стари браузъри.

Можеш да видиш цялата документация на GitHub, заедно с безплатния изходен код. Те също имат демо връзка, така че можете разгледай Tingle в действие за да видим дали може да се побере на вашия сайт.

2. Ванилов модал

Ето един модал, който току-що намерих наскоро и това е много по-просто от повечето. Ванилов модал е верно на името си с a чист ванилов скрипт захранването на модала, заедно с CSS преходи.

Това нещо е доста малко и супер гъвкаво, с персонализиран CSS за преименуване на прозорците. Тя също има много възможности можете да промените с JavaScript, което го прави идеален за работа с DOM функции или дори функции за обратно извикване.

Погледни демо страница за да видите стила по подразбиране. Това е наистина основен дизайн, така че ще бъде изискват персонализиране, за да го използват на производствен сайт. Но това също намалява общите изисквания за кода, така че е една от най-тънките JavaScript модални библиотеки.

3. PlainModal

Ако искате наистина прост скрипт, аз силно препоръчвам plainModal. то е построена на jQuery, но е един от най-малките модални скриптове.

Това е така не използвайте никакви външни CSS или графични файлове. Само един JS скрипт е всичко, от което се нуждаете.

След като скрипта на plainModal бъде добавена към вашата страница, вие просто насочете към бутона за модал и ти си добър. Това ви дава възможност да контролирате дисплея и колко искате да промените модалния интерфейс.

Плюс това можете настройте модела с един ред на JavaScript придържайки се към минималистичната тема на този плъгин.

4. Modaal

Няма съмнение достъпността е огромна в мрежата. Целта на всеки дизайнер трябва да бъде a по-всеобхватен опит за хора по целия свят на различни устройства и с възможни ограничения.

с Modaal, получавате това перфектно изживяване, което преминава теста WCAG 2.0 със солиден рейтинг за достъпност AA. Можете да видите фантастичен пример на главната страница, заедно с някои документи за кодове.

Като цяло, аз препоръчвам този ванилов JavaScript плъгин за всеки, който наистина се интересува от достъпността. Оценката на AA може да се изисква за някои уеб проекти, така че Modaal е наистина удобен скрипт, който да се запази в отметки.

5. Scotch JS Modal

Екипът за развитие на Scotch.io публикува уроци и ръководства за програмисти. Тяхната работа е невероятна и наистина се показва този JavaScript модален скрипт, хостван от Scotch GitHub.

Модалът е разработен от Кен Уилър и този сценарий дори има пълен урок ако искате да научите как работи. Въпреки това свободният код трябва да е достатъчен за повечето разработчици, тъй като това е така супер лек и лесен за настройка. Няма зависимости и дори примерна демонстрация на CodePen.

6. Bootbox.js

Най-бързият начин стартира нов уеб проект е чрез Bootstrap. Това е мощна рамка, която насърчава разработчиците създайте свои собствени добавки към библиотеката.

Един такъв пример е Bootbox.js, малка библиотека на JavaScript, предназначени единствено за модални прозорци в Bootstrap. Всъщност работи в диалогови прозорци където потребителят може да натисне OK или да анулира, въз основа на вашата заявка.

Типичните диалогови прозорци на JavaScript са ужасни, точно като кутии за предупреждения. Скриптът на Bootbox предлага a солидна алтернатива за всеки, който работи в екосистемата BS3 / BS4.

Отново, това е напълно свободен и с отворен код, заедно с a страница с продължителна документация да ви накара да стартирате и вървите бързо.

7. iziModal.js

Ако ти нужда от решение малко по-персонализирани Разгледайте iziModal.js. Този инструмент е напълно отзивчив и предназначени за работи във всички съвременни браузъри перфектно.

Все още не съм намерил друг модален скрипт, който предлага такъв естетичен дизайн. Тя излиза от портата с прекрасен потребителски интерфейс, който може да се слее с практически всеки уебсайт. Но можете също така и стилизира дизайна да отговарят на вашите нужди.

Просто отбележете този плъгин се изпълнява на jQuery, така че това е едно от малкото тук има зависимост. Но, ако искате изимодалните стилове, това е малка цена, която трябва да платите за такива лъскави прозорци.

8. jQuery Modal

Най- jQuery Модален плъгин е може би най-простият модален скрипт на jQuery, който някога ще намерите.

Той може да бъде програмиран автоматично се свързва с определени HTML елементи въз основа на различни атрибути. То също поддържа клавишни комбинации като ESC за затваряне на прозореца.

Като цяло този плъгин мерки под 1KB и то работи във всеки възможен браузър, който можете да си представите. Разработчиците на jQuery трябва да пазят този плъгин запазен за бърз достъп до обикновен модален скрипт без допълнителните излишни украшения.

9. PicoModal

Връщаме се към ванилия JavaScript, имаме PicoModal библиотека. Това е може би един от най-малките скриптове, които ще намерите и предназначени за него тичам перфектно на ванилия JavaScript гръбнак.

То поддържа всички модерни браузъри, включително мобилни браузъри за Android и Mobile Safari за iOS. Той дори поддържа старите IE браузъри, датиращи от IE7!

Разработчик на PicoModal създаде малък скрипт на JSfiddle да покаже как работи. Това е много малък пример и това е не е свързано с събитие за кликване или нещо друго, но не е трудно скрипт в няколко бутони за превключване да изпълните правилно този модален прозорец.

10. Avgrund

Avgrund вероятно е един от най-уникалните модели в този списък. Той използва a ефекта на затихване на персонализирана страница, заедно с свиването на анимацията да привлече модалното право.

Не всички ще оценят тази анимация, така че не мога да кажа, че този скрипт ще отговаря на всеки уебсайт. Но това е чист модал от ванилия и е много лесно да се настрои, само с CSS и JavaScriptд.

Разгледайте демо страница за да видим как работи. Това със сигурност има уникален стил и е трябва да привлече вниманието с персонализирани анимации, които просто работят.

Заключителни думи

Без значение какво търсите, аз ще се обзаложа, че има нещо в този списък, който да отговаря на вашите нужди. Но ако все още не сте доволни прегледайте GitHub за свързани модални скриптове и вижте какво още можете да намерите.