10 besplatnih JavaScript modalnih dodataka za prozore

Možeš naći puno čistih CSS modala ali ove ne nude istu kontrolu kao JavaScript. Pomoću modalnog programa JavaScript možete dodati prilagođene animacije, ulazne korisničke sučelja i zaista poboljšati korisničko iskustvo.

Ali zašto dizajnirati nešto od nule možete koristiti JS knjižnicu? Sakupio sam najbolje besplatne modalne skripte s JavaScriptom ovdje da biste pregledali i izdvojili svoje favorite.

Sve su to potpuno slobodan i otvoren izvor, tako da možete urediti kôd i preoblikovati ih kako bi odgovarali Vašoj web lokaciji prema potrebi.

1. Peckanje

Jedan od mojih omiljenih slobodnih modalnih skripti je Tingle.js. to je izgrađen na JavaScriptu bez ikakvih ovisnosti, tako da ne trebate knjižnice jQuery ili Zepto.

Osim toga, to je prilično mala knjižnica, iako ima mnogo opcija za prilagodbu. Možete promijeniti CSS prijelaze, JavaScript modalne animacije i cijelo korisničko iskustvo uz samo nekoliko postavki.

Tingle.js je dizajniran da bude potpuno pristupačan i osjetljiv, radi na mobilnim uređajima i podržava i starije preglednike.

Možeš vidjeti svu dokumentaciju na GitHubu, zajedno s besplatnim izvornim kodom. Oni također imaju demo vezu, tako da možete provjerite Tingle u akciji da biste vidjeli može li stati na vašu web-lokaciju.

2. Modalitet vanilije

Evo modala koji sam nedavno našao i to je puno jednostavnije od većine. Modalitet vanilije vjerno pripada svom imenu s a čista vanilija skripta napajanje modala, zajedno s CSS prijelazi.

Ova stvar je prilično mala i super fleksibilna, s prilagođeni CSS za ponovni stil prozora. Također ima nekoliko opcija koje možete mijenjati s JavaScriptom, što ga čini savršenim za pokretanje DOM funkcija ili čak funkcije povratnog poziva.

Zavirite u demo stranicu da biste vidjeli zadani stil. To je stvarno osnovni dizajn, tako da će i biti zahtijevaju prilagodbe kako bi ga koristili na proizvodnoj web-lokaciji. Ali to također smanjuje ukupne zahtjeve koda, tako da je jedna od najtanjih JavaScript modalnih knjižnica.

3. običan

Ako želite stvarno jednostavan skriptu preporučujem plainModal. to je izgrađena na jQuery, ali to je jedna od najmanjih dostupnih modalnih skripti.

To radi ne koristite vanjske CSS ili slikovne datoteke. Sve što vam treba je samo jedan JS skript.

Nakon što je plainModal skripta dodana na vašu stranicu, vi samo ciljajte modalni gumb i dobro je ići. To vam omogućuje kontrolu nad zaslonom i koliko želite promijeniti modalno sučelje.

Plus, možete postaviti modal s jednim retkom JavaScripta držeći se minimalističke teme ovog dodatka.

4. Modaal

Nema poricanja dostupnost je ogromna na webu. Cilj svakog dizajnera trebao bi biti inkluzivnije iskustvo za ljude diljem svijeta na različitim uređajima i uz moguća ograničenja.

S Modaal, dobivate savršeno iskustvo koje prolazi test WCAG 2.0 sa solidnom ocjenom pristupačnosti AA. Možete vidjeti fantastičan primjer na glavnoj stranici, zajedno s nekom dokumentacijom koda.

Sve u svemu, preporučujem ovaj plugin za vanilije JavaScript za svakoga tko stvarno brine o dostupnosti. AA ocjena može biti potrebna na nekim web-projektima, tako da je Modaal stvarno zgodan skript za bilježenje.

5. Scotch JS Modal

Razvojni tim tvrtke Scotch.io objavljuje vodiče i vodiče za kodere. Njihov rad je nevjerojatan i stvarno se pokazuje ovaj JavaScript modalni skript, smješten na Scotch GitHubu.

Modal je razvio Ken Wheeler i ovaj scenarij ima cijeli vodič ako želite saznati kako funkcionira. Međutim, slobodni kod bi trebao biti dovoljan za većinu programera jer je to super lagan i jednostavan za postavljanje. Nema ovisnosti, pa čak i ogledni demo na CodePen.

6. Bootbox.js

Najbrži način pokrenuti novi web projekt je kroz Bootstrap. To je snažan frontendni okvir koji potiče programere na kreirajte vlastite dodatke u knjižnicu.

Jedan takav primjer je Bootbox.js, mala JavaScript knjižnica, dizajniran isključivo za modalne prozore u programu Bootstrap. Zapravo radi u dijaloškim okvirima gdje korisnik može kliknuti U redu ili otkazati, na temelju vašeg zahtjeva.

Tipični JavaScript dijalozi su grozni, baš kao i okviri upozorenja. Bootbox skripta nudi a solidna alternativa za svakoga tko radi u BS3 / BS4 ekosustavu.

Opet, to je potpuno slobodan i otvoren izvor, zajedno s duga stranica s dokumentacijom da bi te brzo pokrenuo.

7. iziModal.js

Ako ti trebate rješenje malo više prilagođeno provjeri iziModal.js. Ovaj alat je potpuno odgovarajući i dizajniran za savršeno rade u svim modernim preglednicima.

Još nisam pronašao drugu modalnu skriptu koja nudi takav estetski ugodan dizajn. Izlazi na vrata s a prekrasan UI koji se mogu uklopiti u gotovo bilo koju web stranicu. Međutim, možete također je stilizirao dizajn da odgovara vašim potrebama.

Samo zabilježite ovaj dodatak radi na jQuery, tako da je to jedan od rijetkih ovdje ima ovisnost. No, ako želite iziModal stilove, to je mala cijena za takve elegantne popover prozore.

8. jQuery Modal

jQuery Modalni dodatak je možda najjednostavnija modalna skripta na jQuery koju ćete ikada pronaći.

Može se programirati na automatski se veže s određenim HTML elementima na temelju različitih atributa. Također podržava tipkovničke prečace kao što je ESC za zatvaranje prozora.

Ukupno, ovaj dodatak mjere manje od 1KB i to radi u svim mogućim preglednicima koje možete zamisliti. jQuery programeri bi trebali držati ovaj dodatak spremljen za brzi pristup jednostavnoj modalnoj skripti bez dodatnih dodataka.

9. PicoModal

Vraćajući se natrag prema JavaScriptu, imamo PicoModal knjižnica. Ovo je vjerojatno jedna od najmanjih skripti koju ćete pronaći i namijenjena je savršeno se pokreću na okosnici JavaScripta vanilije.

To podržava sve moderne preglednike, uključujući mobilne preglednike za Android i Mobile Safari za iOS. Čak podržava i starije IE preglednike, počevši od IE7!

PicoModalov developer stvorio mali JSfiddle skriptu pokazati kako to radi. Ovo je vrlo mali primjer i to je nije vezan za događaj klika ili bilo što drugo, ali nije teško skriptu u nekoliko prekidačkih tipki da ispravno pokrene ovaj modalni prozor.

10. Avgrund

Avgrund je vjerojatno jedan od najjedinstvenijih modala na ovom popisu. Ona koristi a prilagođeni efekt blijedljenja stranica, zajedno sa smanjenjem animacije kako bi se modalno pravo stavilo u pogled.

Neće svatko cijeniti ovu animaciju, tako da ne mogu reći da bi ova skripta odgovarala svakoj web-lokaciji. Ali, to je čisti modalitet vanilije i vrlo je jednostavno postaviti, sa samo CSS i JavaScript file.

Pogledajte demo stranicu da vidi kako radi. Sigurno je dobio jedinstven stil i jest privukla pozornost s prilagođenim animacijama koje jednostavno funkcioniraju.

Završne riječi

Bez obzira što tražite, kladim se da postoji nešto na ovom popisu koji odgovara vašim potrebama. Ali, ako još niste zadovoljni pregledajte GitHub za povezane modalne skripte i vidjeti što još možete pronaći.