10 tasuta JavaScripti modaalakna pistikprogrammi

Leiad palju puhast CSS-modaale kuid need ei paku sama kontrolli nagu JavaScript. JavaScripti modaaliga saate lisada kohandatud animatsioone, kasutajaliidese sisendeid ja tõesti kasutajate kogemusi.

Aga miks peaksite midagi ette valmistama saate kasutada JS-raamatukogu? Olen kogunud parimad tasuta JavaScript-toega modaalsed skriptid siin saate tutvuda oma lemmikutega.

Kõik need on täiesti tasuta ja avatud lähtekoodiga, et saaksite koodi muuta ja vajadusel oma saidile sobitada.

1. Tingle

Üks minu lemmik tasuta modaalkripte on Tingle.js. See on ehitatud vanilla JavaScript ilma sõltuvusteta, nii et te ei vaja mingeid jQuery või Zepto raamatukogusid.

Lisaks on see küllaltki väike raamatukogu, kuigi see on olemas palju võimalusi kohandamiseks. Mõne seadistusega saate muuta CSS-i üleminekuid, JavaScripti modaalset animatsioone ja kogu kasutaja kogemust.

Tingle.js on mõeldud olema täielikult ligipääsetav ja reageeriv, seega töötab see mobiilseadmetes ja toetab ka vanemaid brausereid.

Sa näed kõik GitHubi dokumendid, koos vaba lähtekoodiga. Neil on ka demo link, nii et saate vaadake Tingle'i tegevuses näha, kas see sobiks teie veebisaidile.

2. Vanillimoodul

Siin on modaal, mille ma hiljuti leidsin ja see on palju lihtsam kui enamik. Vanilla Modal tähistab oma nime a-ga puhas vanilje skript koos modaliga CSS-i üleminekud.

See asi on päris väike ja väga paindlik kohandatud CSS akende ümberkorraldamiseks. See on ka üsna palju võimalusi, mida saate JavaScriptiga muuta, see sobib ideaalselt DOM-funktsioonide või isegi tagasihelistamisfunktsioonide kasutamiseks.

Pöörake pilgu peale demo leht vaikimisi stiili nägemiseks. See on tõesti põhiline disain, nii et see on nõuda kohandamist, et seda kasutada tootmiskohas. Kuid see vähendab ka kogu koodi nõuet, nii et see on üks kõige nõrgemaid JavaScript-mooduleid.

3. plainModal

Kui soovid tõesti lihtsat skripti, soovitan seda väga plainModal. see on ehitatud jQueryle, aga see on üks väiksematest modaalsetest skriptidest.

See teeb ei kasuta väliseid CSS- või pildifaile. Vaid üks JS-skript on kõik vajalik.

Kui plainModal skript on teie lehele lisatud, siis lihtsalt suunata modaalnupp ja sa oled hea minna. See annab teile kontrolli ekraani üle ja kui palju soovite modaalset liidest muuta.

Lisaks saate seadistage modaal ühe Java-reaga kooskõlas selle plugina minimalistliku teemaga.

4. Modaal

Ei ole eitamist kättesaadavus on veebis tohutu. Iga disaineri eesmärk peaks olema a kaasavam kogemus inimestele kogu maailmas erinevatel seadmetel ja võimalike piirangutega.

Koos Modaal, sa saad selle täiusliku kogemuse läbib WCAG 2.0 testi kindla AA juurdepääsetavuse hinnanguga. Põhilehel on mõned näited koos mõne koodidokumentatsiooniga.

Üldiselt soovitan seda vanilla JavaScript pluginat kõigile, kes hoolivad ligipääsetavuse kohta. AA reitingut võib nõuda mõnedel veebiprojektidel, nii et Modaal on tõesti mugav skript, mis hoiab järjehoidjaid järjepidevalt.

5. Scotch JS Modal

Scotch.io arendusmeeskond avaldab programmeerijate juhendeid ja juhendeid. Nende töö on uskumatu ja see näitab tõesti see JavaScript modaalskript, mis asub Scotch GitHubis.

Modalit töötas välja Ken Wheeler ja see skript on täielik juhendaja kui soovite teada, kuidas see toimib. Siiski peaks enamikele arendajatele piisav vaba kood, kuna see on super kerge ja lihtne seadistada. Puuduvad sõltuvused ja isegi näidisprojekt CodePenis.

6. Bootbox.js

Kiireim viis käivitada uus veebiprojekt on läbi Bootstrap. See on võimas esipaneeli raamistik, mis julgustab arendajaid luua oma lisandmooduleid.

Üks selline näide on Bootbox.js, väike JavaScript-raamatukogu, mõeldud ainult modaalsetele akendele Bootstrapis. Tegelikult töötab dialoogiboksides kui kasutaja saab teie taotluse alusel klõpsata OK või tühistada.

Tüüpilised JavaScripti dialoogid on kohutavad, nagu hoiatuskastid. Bootboxi skript pakub a kindel alternatiiv kõigile BS3 / BS4 ökosüsteemis töötavatele inimestele.

Jällegi, see on täiesti tasuta ja avatud lähtekoodiga, koos a pikk dokumentatsioonileht kiiresti ja kiiresti.

7. iziModal.js

Kui sa vajab lahendust veidi kohandatavamaks vaadake iziModal.js. See tööriist on täielikult reageeriv ja mis on kavandatud töötavad ideaalselt kõikides kaasaegsetes brauserites.

Ma pole veel leidnud teist modaalset skripti, mis pakub sellist esteetiliselt meeldivat disaini. See väljub väravast uhke kasutajaliides, mis sobib praktiliselt iga veebisaidiga. Kuid saate ka disaini ümber vastavalt teie vajadustele.

Pange tähele seda pluginat see töötab jQuery'l, nii et see on üks vähestest siin omab sõltuvust. Aga kui sa tahad iziModal stiile, siis see on väike hind, mida maksta selliste klanitud popoveride eest.

8. jQuery Modal

The jQuery Modal plugin võib-olla on see lihtsaim moodulskript jQuery's, mida te kunagi leiate.

Seda saab programmeerida automaatselt siduvad teatud HTML-elementidega põhineb erinevatel omadustel. See samuti toetab kiirklahve näiteks ESC akna sulgemiseks.

Kokku on see plugin mõõdab vähem kui 1KB ja see töötab igas võimalikus brauseris, mida võite ette kujutada. jQuery arendajad peaksid säilitama selle plugina salvestatud, et saada kiire juurdepääs lihtsale modaalsele skriptile ilma lisatasuta.

9. PicoModal

Vanilla JavaScript poole pöördudes on meil PicoModal raamatukogu. See on ilmselt üks väiksemaid skripte, mille leiate ja see on mõeldud joosta ideaalselt vanilla JavaScript selgroog.

See toetab kõiki kaasaegseid brausereid, sealhulgas mobiilse brauseri jaoks Android ja Mobile Safari jaoks iOS. See toetab isegi vanemaid IE-i brausereid, mis pärinevad IE7-st!

PicoModal arendaja loonud väikese JSfiddle'i skripti näidata, kuidas see toimib. See on väga väike näide ja see on ei ole seotud kliki sündmusega ega midagi muud, kuid see pole raske skript mõne nuppudega seda modaalkogu korralikult käivitada.

10. Avgrund

Avgrund on tõenäoliselt üks unikaalsemaid mooduleid selles nimekirjas. See kasutab a kohandatud lehekülje tuhmumise efekt koos kahaneva animatsiooniga transpordiliigi paremaks muutmiseks.

Mitte igaüks hindab seda animatsiooni, nii et ma ei saa öelda, et see skript sobiks iga veebisaidiga. Aga see on a puhas vanilje modaal ja see on super lihtne seadistada, ainult CSS ja JavaScript file.

Heitke pilk demo leht kuidas see töötab. See on kindlasti unikaalne stiil ja see on tähelepanu pöörama kohandatud animatsioonidega, mis lihtsalt töötavad.

Lõplikud sõnad

Ükskõik, mida te otsite, panustan, et selles nimekirjas on teie vajadustele vastav midagi. Aga kui sa pole veel rahul sirvige GitHubi seotud modaalsete skriptide jaoks ja vaata, mida veel leiad.