10 Prosti JavaScript Modal Window Plugins
Lahko najdeš veliko čistih CSS modalov ampak te ne nudijo enake kontrole kot JavaScript. Z modalnim programom JavaScript lahko dodajate animacije po meri, vložke uporabniškega vmesnika in resnično izboljšate uporabniško izkušnjo.
Ampak, zakaj oblikovati nekaj iz nič, ko lahko uporabite knjižnico JS? Zbiral sem najboljše proste modalne skripte, ki jih poganja JavaScript Tukaj si lahko ogledate in izločite svoje priljubljene.
Vse to je popolnoma prost in odprtokoden, tako da lahko urejate kodo in jih po potrebi preoblikujete, da se prilega vašemu spletnemu mestu.
1. Pecanje
Ena izmed mojih najljubših modalnih skript je Tingle.js. To je zgrajena na vanilji JavaScript brez odvisnosti, zato ne potrebujete knjižnic jQuery ali Zepto.
Poleg tega je to dokaj majhna knjižnica, čeprav ima veliko možnosti za prilagajanje. Spremenite lahko prehod CSS, modalne animacije JavaScript in celotno uporabniško izkušnjo s samo nekaj nastavitvami.
Tingle.js je zasnovan tako, da je popolnoma dostopna in odzivna, zato deluje na mobilnih napravah in podpira tudi starejše brskalnike.
Lahko vidiš vso dokumentacijo na GitHubu, skupaj z brezplačno izvorno kodo. Imajo tudi demo povezavo, tako da lahko poglej Tingle v akciji da bi videl, ali bi lahko ustrezal vašemu spletnemu mestu.
2. Modal Vanilla
Tukaj je modal, ki sem ga nedavno našel in je veliko lažje kot večina. Modal Vanilla s svojim imenom je zvest čisti vanilin skript poganja modal, skupaj z Prehodi CSS.
Ta stvar je zelo majhna in zelo prilagodljiva, z CSS po meri za preoblikovanje oken. Prav tako ima kar nekaj možnosti, ki jih lahko spremenite s JavaScriptom, zaradi česar je idealen za delovanje DOM funkcij ali celo za funkcije povratnega klica.
Pokukajte na demo stran za prikaz privzetega sloga. To je zelo osnovna zasnova, tako da bo zahtevajo prilagoditve za njegovo uporabo na mestu izdelave. Toda to tudi zmanjšuje skupne zahteve kode, tako da je ena najtanjših modalnih knjižnic JavaScript.
3. PlainModal
Če želite zelo preprost scenarij, ga zelo priporočam PlainModal. je zgrajena na jQuery, ampak to je ena najmanjših modalnih skriptov, ki so na voljo.
Ima ne uporabljajte zunanjih CSS ali slikovnih datotek. Samo en sam skript JS je vse, kar potrebujete.
Ko je plainModal skript dodan na vašo stran, ste pravkar ciljno tipko modal in dobro greš. To vam omogoča nadzor nad zaslonom in koliko želite spremeniti modalni vmesnik.
Plus, lahko nastavite modal z eno vrstico JavaScripta z minimalistično temo tega vtičnika.
4. Modaal
Ni mogoče zanikati Dostopnost je na spletu ogromna. Cilj vsakega oblikovalca mora biti a bolj vključujoče izkušnje za ljudi po vsem svetu na različnih napravah in z morebitnimi omejitvami.
S Modaal, dobiš to popolno izkušnjo, ki prehaja test WCAG 2.0 s trdno bonitetno oceno AA. Ogledate si lahko fantastičen primer na glavni strani, skupaj z nekaj dokumentacije kode.
Na splošno priporočam ta plugin za vanilla JavaScript za vsakogar, ki resnično skrbi za dostopnost. Bonitetna ocena AA se lahko zahteva na nekaterih spletnih projektih, zato je Modaal res priročen skript, ki ga lahko shranjujete.
5. Scotch JS Modal
Razvojna ekipa na Scotch.io objavlja vaje in vodnike za koderje. Njihovo delo je neverjetno in resnično se pokaže ta modalni skript JavaScript, ki ga gosti Scotch GitHub.
Modal je razvil Ken Wheeler in ta scenarij ima celotno vadnico če želite izvedeti, kako deluje. Vendar pa mora biti brezplačna koda dovolj za večino razvijalcev, saj je to super lahek in enostaven za namestitev. Ni odvisnosti, in celo vzorec demo na CodePen.
6. Bootbox.js
Najhitrejši način zagon novega spletnega projekta je prek zagonskega traku. To je zmogljiv okvir, ki spodbuja razvijalce ustvarite lastne dodatke v knjižnici.
En tak primer je Bootbox.js, majhna knjižnica JavaScript, namenjeni izključno za modalna okna v Bootstrap. Pravzaprav deluje v pogovornih oknih kjer lahko uporabnik klikne V redu ali prekliče na podlagi vaše zahteve.
Tipična pogovorna okna JavaScript so grozna, tako kot polja opozoril. Bootbox skript ponuja a trdna alternativa za vse, ki delajo v ekosistemu BS3 / BS4.
Spet je popolnoma brezplačen in odprtokoden, skupaj z dolga stran z dokumentacijo da boste hitro delovali.
7. iziModal.js
Če ti potrebujete rešitev, ki je nekoliko bolj prilagojena preveri iziModal.js. To orodje je popolnoma odziven in zasnovan tako delo v vseh sodobnih brskalnikih popolnoma.
Še vedno ne najdem druge modalne skripte, ki ponuja tako estetsko prijeten dizajn. Izpelje se skozi vrata z a krasen UI, ki se lahko zlijejo praktično na katero koli spletno stran. Vendar pa lahko tudi preoblikujejo zasnovo za vaše potrebe.
Samo upoštevajte ta vtičnik se izvaja na jQuery, zato je to eden redkih tukaj ima odvisnost. Ampak, če želite iziModal stilov, je majhna cena za takšne elegantne popover okna.
8. jQuery Modal
The jQuery Modal plugin je mogoče najenostavnejši modalni skript na jQuery, ki ga boste kdaj našli.
Lahko se programira na samodejno poveže z določenimi elementi HTML temeljijo na različnih atributih. Tudi podpira bližnjice na tipkovnici kot je ESC za zapiranje okna.
Skupaj ta vtičnik manj kot 1KB in to deluje v vseh možnih brskalnikih, ki si jih lahko predstavljate. Razvijalci jQuery bi morali shraniti ta vtičnik za hiter dostop do preprostih modalnih skript brez dodatnih dodatkov.
9. PicoModal
Če se vrnemo k JavaScriptu, imamo PicoModalna knjižnica. To je verjetno eden od najmanjših skriptov, ki jih boste našli in je namenjen teče popolnoma na hrbtenici vanilije JavaScript.
To podpira vse sodobne brskalnike, vključno z mobilnimi brskalniki za Android in Mobile Safari za iOS. Podpira tudi starejše IE brskalnike, ki segajo v IE7!
PicoModalov razvijalec ustvaril majhen scenarij JSfiddle prikazati, kako deluje. To je zelo majhen primer in to je ni vezan na dogodek klika ali karkoli drugega, ampak ni težko skript v nekaj preklopnih gumbih za pravilno izvajanje tega modalnega okna.
10. Avgrund
Avgrund je verjetno ena najbolj edinstvenih modalij na tem seznamu. Uporablja a učinek pojemanja strani po meri in krčenje animacije da bi se pogled na modalni pogled začel.
Vsi ne bodo cenili te animacije, zato ne morem reči, da bi ta scenarij ustrezal vsem spletnim mestom. Ampak, to je čista moda vanilije in zelo enostavno ga je nastaviti, s samo CSS in JavaScript file.
Oglejte si demo stran da vidite, kako poteka. To je zagotovo edinstven slog in je me bo privlačil pozornost z animacijami po meri, ki pravkar delujejo.
Zadnje besede
Ne glede na to, kaj iščete, stavim, da obstaja nekaj na tem seznamu, da bo ustrezalo vašim potrebam. Ampak, če še vedno niste zadovoljni brskate po GitHubu za povezane modalne skripte in poglejte, kaj še lahko najdete.
