10 Бесплатно ЈаваСцрипт Модал Виндов Плугинс

Можете наћи много чистих ЦСС модала али ове не нуде исту контролу као ЈаваСцрипт. Са ЈаваСцрипт модалом, можете додати прилагођене анимације, УИ улазе и заиста побољшати корисничко искуство.

Али зашто дизајнирати нешто од нуле можете користити ЈС библиотеку? Сакупио сам најбоље бесплатне модалне скрипте са ЈаваСцриптом овде да прочитате и издвојите своје фаворите.

Све су то потпуно слободан и отворен извор, тако да можете уредити код и поново их подесити тако да одговара Вашем сајту по потреби.

1. Тингле

Један од мојих омиљених слободних модалних скрипти је Тингле.јс. Његово изграђен на ЈаваСцрипту без икаквих зависности, тако да вам не требају јКуери или Зепто библиотеке.

Плус, то је прилично мала библиотека, иако има много опција за прилагођавање. Можете да промените ЦСС прелазе, ЈаваСцрипт модалне анимације и читаво корисничко искуство са само неколико подешавања.

Тингле.јс је дизајниран да буде потпуно приступачан и приступачан, тако да ради на мобилним уређајима и подржава и старије прегледнике.

Можете видети све документације на ГитХуб-у, заједно са бесплатним изворним кодом. Такође имају демо везу, тако да можете проверите Тингле у акцији да види да ли би се могао уклопити на ваш сајт.

2. Ванила Модал

Ево модала који сам недавно нашао и то је много једноставније од већине. Ванилла Модал стоји тачно свом имену са чисти ванилин скрипт напајање модала, заједно са ЦСС прелази.

Ова ствар је прилично мала и супер флексибилна, са прилагођени ЦСС за поновни стил прозора. Она има Постоји неколико опција које можете изменити помоћу ЈаваСцрипт-а, што га чини савршеним за покретање ДОМ функција или чак функције повратног позива.

Завирите у демо паге да бисте видели подразумевани стил. То је заиста основни дизајн, тако да ће бити захтевају прилагођавања да би се користили на производном месту. Али то такође смањује укупне захтеве кода, тако да је једна од најтањих ЈаваСцрипт модалних библиотека.

3. плаинМодал

Ако желите заиста једноставан скрипт, препоручујем плаинМодал. То је изграђен на јКуери, али је један од најмањих доступних модалних скрипти.

То јесте не користите никакве екстерне ЦСС или сликовне датотеке. Све што вам треба је само један ЈС скрипт.

Када се плаинМодал скрипта дода на вашу страницу, ви само циљајте модални тастер и добро је ићи. Ово вам омогућава контролу над екраном и колико желите да промените модални интерфејс.

Плус, можете поставите модал са једном линијом ЈаваСцрипт-а држећи се минималистичке теме овог додатка.

4. Модаал

Нема порицања приступачност је огромна на вебу. Циљ сваког дизајнера треба да буде инклузивније искуство за људе широм света на различитим уређајима и са могућим ограничењима.

Са Модаал, добијате савршено искуство које пролази тест ВЦАГ 2.0 са солидним АА оценом приступачности. Можете видети фантастичан пример на главној страници, заједно са неком документацијом кода.

Све у свему, препоручујем овај плугин за ванилла ЈаваСцрипт за свакога ко заиста брине о приступачности. АА рејтинг може бити потребан на неким веб пројектима, тако да је Модаал заиста згодан скрипт који се може користити за означавање.

5. Сцотцх ЈС Модал

Развојни тим Сцотцх.ио објављује туторијале и водиче за кодере. Њихов рад је невероватан и заиста се показује овај ЈаваСцрипт модални скрипт, хостован на Сцотцх ГитХуб-у.

Модал је развио Кен Вхеелер и овај сценарио има комплетан водич ако желите да научите како функционише. Међутим, слободни код би требао бити довољан за већину програмера јер је то супер лаган и једноставан за постављање. Нема зависности, па чак и огледни демо на ЦодеПен.

6. Боотбок.јс

Најбржи пут покренути нови веб пројекат је преко Боотстрап. То је моћан фронтендни оквир који охрабрује програмере креирајте сопствене додатке у библиотеку.

Један такав пример је Боотбок.јс, мала ЈаваСцрипт библиотека, дизајниран искључиво за модалне прозоре у Боотстрап-у. Заправо ради на дијалозима где корисник може да кликне на ОК или да откаже, на основу вашег захтева.

Типични ЈаваСцрипт дијалози су ужасни, баш као и кутије упозорења. Боотбок скрипта нуди а солидна алтернатива за свакога ко ради у БС3 / БС4 екосистему.

Опет, то је потпуно слободан и отворен извор, заједно са дуга страница са документацијом да би те брзо подигли.

7. изиМодал.јс

ако ти потребно је решење мало више прилагођено проверити изиМодал.јс. Овај алат је фулл респонсиве и дизајниран за савршено ради у свим модерним претраживачима.

Још нисам пронашао други модални скрипт који нуди тако естетски угодан дизајн. Излази кроз капију са а прекрасан УИ који се може уклопити у практично било који веб сајт. Међутим, можете такође рестиле дизајн да одговара вашим потребама.

Само запамтите овај додатак ради на јКуери, тако да је то један од ретких овде има зависност. Али, ако желите изиМодал стилове, то је мала цијена за такве елегантне поповер прозоре.

8. јКуери Модал

Тхе јКуери Модал плугин је можда најједноставнији модални скрипт на јКуери који ћете икада пронаћи.

Може се програмирати на аутоматски се повезује са одређеним ХТМЛ елементима на основу различитих атрибута. Такође подржава пречице на тастатури као што је ЕСЦ за затварање прозора.

Укупно, овај додатак мање од 1КБ и то ради у свим могућим претраживачима које можете замислити. јКуери програмери би требали држати овај додатак спремљен за брзи приступ једноставном модалном скрипту без додатних додатака.

9. ПицоМодал

Враћајући се према ЈаваСцрипту, имамо ПицоМодал либрари. Ово је вероватно један од најмањих скрипти које ћете пронаћи и дизајниран је тако савршено се покреће на ослонцу ЈаваСцрипт-а ванилије.

То подржава све модерне прегледнике, укључујући мобилне претраживаче за Андроид и Мобиле Сафари за иОС. Чак подржава и старије ИЕ претраживаче, почевши од ИЕ7!

Програмер ПицоМодала створио мали ЈСфиддле скрипт да покаже како то функционише. Ово је веома мали пример и то је није везан за догађај кликом или било шта друго, али није тешко скрипту у неколико прекидачких типки да правилно покренете овај модални прозор.

10. Авгрунд

Авгрунд је вероватно један од најјединственијих модала на овој листи. Она користи а прилагођени ефекат бледења страница, заједно са смањењем анимације да би се модално право ставило у поглед.

Неће сви ценити ову анимацију, тако да не могу да кажем да би ова скрипта одговарала сваком веб сајту. Али, то је чист ванила модал и веома је лако поставити, са само ЦСС и ЈаваСцрипт филе.

Погледај демо паге да види како ради. Сигурно има јединствен стил и јесте да привуку пажњу са прилагођеним анимацијама које једноставно функционишу.

Завршне речи

Без обзира шта тражите, кладим се да постоји нешто на овој листи да одговара вашим потребама. Али, ако још нисте задовољни прегледајте ГитХуб за повезане модалне скрипте и видите шта још можете наћи.