10 bezmaksas JavaScript modālo logu spraudņi

Tu vari atrast daudz tīru CSS modālu bet tie nepiedāvājiet tādu pašu kontroli kā JavaScript. Izmantojot JavaScript modālu, varat pievienot pielāgotus animācijas, lietotāja interfeisa ievadus un patiešām uzlabot lietotāju pieredzi.

Bet, kāpēc kaut ko izstrādāt no nulles, kad varat izmantot JS bibliotēku? Esmu savācis labākie bezmaksas JavaScript JavaScript moduļi šeit jūs varat iepazīt un izdalīt savus izlasi.

Visi šie ir pilnīgi bez maksas un atvērtā koda, lai jūs varētu rediģēt kodu un atjaunot tos, lai tie pēc vajadzības atbilstu jūsu vietnei.

1. Tingle

Viens no maniem iecienītākajiem bezmaksas modālu skriptiem ir Tingle.js. Tas ir balstīta uz vaniļas JavaScript bez atkarībām, tāpēc jums nav nepieciešama jQuery vai Zepto bibliotēka.

Turklāt tā ir diezgan maza bibliotēka, lai gan tā ir daudz pielāgošanas iespēju. Ar dažiem iestatījumiem varat mainīt CSS pārejas, JavaScript modālās animācijas un visu lietotāja pieredzi.

Tingle.js ir paredzēts pilnībā pieejama un atsaucīga, tā darbojas mobilajās ierīcēs un atbalsta arī vecākos pārlūkus.

Tu vari redzēt visus dokumentus par GitHub, kopā ar bezmaksas pirmkodu. Viņiem ir arī demo saite, lai jūs varētu pārbaudiet Tingle darbībā lai redzētu, vai tas var ietilpt jūsu vietnē.

2. Vaniļas modāls

Lūk, modals, ko nesen atklāju, un tas ir daudz vienkāršāka nekā lielākā daļa. Vaniļas modāls ir tā nosaukums ar a tīra vaniļas skripts kopā ar CSS pārejas.

Šī lieta ir diezgan maza un ļoti elastīga pielāgots CSS, lai atjaunotu logus. Tas arī ir diezgan daudzas iespējas, ko var mainīt ar JavaScript, padarot to perfektu DOM funkciju darbībai vai pat atzvanīšanas funkcijām.

Palieciet uz demonstrācijas lapa lai redzētu noklusējuma stilu. Tas ir patiešām pamata dizains, tāpēc tas būs pieprasīt pielāgošanu, lai to izmantotu ražošanas vietā. Bet tas arī samazina kopējo kodu prasības, tāpēc tas ir viena no plānākajām JavaScript modālās bibliotēkām.

3. PlainModal

Ja jūs vēlaties ļoti vienkāršu skriptu, es ļoti ieteiktu plainModal. Tas ir balstīta uz jQuery, bet tas ir viens no mazākajiem pieejamiem moduļu skriptiem.

Tas notiek neizmantojiet ārējos CSS vai attēlu failus. Viss, kas jums nepieciešams, ir tikai viens JS skripts.

Tiklīdz plainModal skripts ir pievienots jūsu lapai, jūs vienkārši mērķēt modālo pogu un jums ir labi iet. Tas ļauj jums kontrolēt displeju un cik daudz vēlaties mainīt modālo saskarni.

Plus, jūs varat izveidot modālu ar vienu JavaScript līniju kas atbilst šī spraudņa minimālisma tēmai.

4. Modaal

Nav noliegt pieejamība ir milzīga tīmeklī. Katram dizainera mērķim jābūt a plašāka pieredze cilvēkiem visā pasaulē dažādās ierīcēs un ar iespējamiem ierobežojumiem.

Ar Modaal, jūs saņemsiet šo perfektu pieredzi, kas iztur WCAG 2.0 testu ar stabilu AA pieejamības novērtējumu. Jūs varat redzēt fantastisku piemēru galvenajā lapā kopā ar dažiem koda dokumentiem.

Kopumā es ieteiktu šo vaniļas JavaScript spraudni ikvienam, kurš patiešām rūpējas par pieejamību. AA reitingu var pieprasīt dažos tīmekļa projektos, tāpēc Modaal ir patiešām ērts skripts, lai saglabātu grāmatzīmi.

5. Scotch JS Modal

Scotch.io izstrādes komanda publicē apmācības un rokasgrāmatas programmētājiem. Viņu darbs ir neticami, un tas tiešām parādās šis JavaScript moduļu skripts, kas atrodas Scotch GitHub.

Modālu izstrādāja Ken Wheeler un šis skripts ir pilna apmācība ja vēlaties uzzināt, kā tā darbojas. Tomēr brīvajam kodam jābūt pietiekamam vairumam izstrādātāju, jo tas ir super viegls un viegli uzstādāms. Nav atkarību, un pat izlases demo par CodePen.

6. Bootbox.js

Ātrākais veids, kā uzsākt jaunu tīmekļa projektu ir caur Bootstrap. Tas ir spēcīgs frontends, kas rosina izstrādātājus izveidot savus papildinājumus bibliotēkā.

Viens šāds piemērs ir Bootbox.js, neliela JavaScript bibliotēka, paredzēti tikai modāliem logiem Bootstrap. Tas patiesībā darbojas dialoglodziņos ja lietotājs var noklikšķināt uz OK vai atcelt, pamatojoties uz jūsu pieprasījumu.

Tipiski JavaScript dialogi ir šausmīgi, tāpat kā brīdinājuma lodziņi. Bootbox skripts piedāvā a stabila alternatīva ikvienam, kas strādā BS3 / BS4 ekosistēmā.

Atkal, tas ir pilnīgi bez maksas un atvērtā koda, kopā ar a ilga dokumentācijas lapa lai jūs ātri un ātri darbotos.

7. iziModal.js

Ja jūs nepieciešams risinājums nedaudz pielāgotākajā izbraukšana iziModal.js. Šis rīks ir pilnībā reaģē un ir paredzēti perfekti darboties visās mūsdienu pārlūkprogrammās.

Es vēl esmu atradis citu modālu skriptu, kas piedāvā šādu estētisku dizainu. Tas iziet no vārtiem ar a krāšņs lietotāja interfeiss, kas var apvienoties praktiski jebkurā tīmekļa vietnē. Tomēr jūs varat arī dizaina atjaunošana atbilstoši jūsu vajadzībām.

Vienkārši atzīmējiet šo spraudni darbojas ar jQuery, tāpēc tas ir viens no nedaudzajiem šeit ir atkarīga. Bet, ja vēlaties iziModal stilus, tas ir maza cena, kas jāmaksā par šādiem gludiem logiem.

8. jQuery Modal

The jQuery Modal spraudnis varbūt ir vienkāršākais modālais skripts par jQuery jūs kādreiz atradīsiet.

To var ieprogrammēt automātiski saistās ar noteiktiem HTML elementiem pamatojoties uz dažādiem atribūtiem. Tas arī atbalsta tastatūras īsceļus piemēram, ESC loga aizvēršanai.

Kopumā šis spraudnis pasākumi ir mazāki par 1 KB un tā darbojas visos iespējamos pārlūkos, kurus varat iedomāties. jQuery izstrādātājiem vajadzētu saglabāt šo spraudni, lai ātri piekļūtu vienkāršam modāla skriptam bez papildu frills.

9. PicoModal

Atgriežoties pie vaniļas JavaScript, mums ir PicoModal bibliotēka. Iespējams, tas ir viens no mazākajiem skriptiem, ko atradīsiet, un tas ir paredzēts darbojas perfekti uz vaniļas JavaScript mugurkaula.

Tā atbalsta visas mūsdienu pārlūkprogrammas, ieskaitot mobilās pārlūkprogrammas Android un Mobile Safari iOS. Tā pat atbalsta vecākas IE pārlūkprogrammas, kas datētas ar IE7!

PicoModal attīstītājs izveidoja nelielu JSfiddle skriptu lai parādītu, kā tā darbojas. Tas ir ļoti mazs piemērs un tas ir nav saistīts ar klikšķa notikumu vai kaut ko citu, bet tas nav grūti skriptu dažās pārslēgšanas pogās pareizi vadīt šo modālo logu.

10. Avgrund

Avgrund iespējams, ir viens no unikālākajiem šajā sarakstā. Tā izmanto a pielāgota lapas fading efekts, kā arī samazinās animācija ieviest modālo režīmu.

Ne visi novērtēs šo animāciju, tāpēc es nevaru teikt, ka šis skripts būtu piemērots katrai vietnei. Bet tas ir tīrs vaniļas modāls un tas ir super viegli uzstādāms, tikai ar CSS un JavaScript file.

Paskatieties demonstrācijas lapa lai redzētu, kā tas darbojas. Tas noteikti ir unikāls stils un ir piesaistīt uzmanību ar pielāgotām animācijām, kas tikai darbojas.

Nobeiguma vārdi

Neatkarīgi no tā, ko jūs meklējat, es likšu derēt, ka šajā sarakstā ir kaut kas atbilstoši jūsu vajadzībām. Bet, ja jūs joprojām neesat apmierināts pārlūkojiet GitHub saistītos modālu skriptus un redzēt, ko vēl var atrast.