10 ilmaista JavaScript-modaalilaajennusta

Voit löytää paljon puhdasta CSS-modaalia mutta nämä älä tarjoa samaa ohjausta kuin JavaScript. JavaScript-modaalin avulla voit lisätä mukautettuja animaatioita, käyttöliittymän syötteitä ja todella parantaa käyttäjäkokemusta.

Mutta miksi suunnitella jotain tyhjästä, kun voit käyttää JS-kirjastoa? Olen kerännyt parhaat vapaat JavaScript-moduulit täällä voit lukea ja erottaa suosikkisi.

Kaikki nämä ovat täysin vapaa ja avoin lähde, joten voit muokata koodia ja palauttaa ne sopivaksi sivustoosi tarpeen mukaan.

1. Tingle

Yksi suosituimmista ilmaisista modaalisista skripteistä on Tingle.js. Sen rakennettu vanilja-JavaScriptille ilman riippuvuuksia, joten et tarvitse mitään jQuery- tai Zepto-kirjastoja.

Lisäksi se on melko pieni kirjasto, vaikka sillä onkin paljon vaihtoehtoja räätälöintiin. Voit muuttaa CSS-siirtymiä, JavaScript-modaalisia animaatioita ja koko käyttäjäkokemusta muutamalla asetuksella.

Tingle.js on suunniteltu täysin saatavilla ja reagoiva, joten se toimii mobiililaitteissa ja tukee myös vanhempia selaimia.

Sinä pystyt näkemään kaikki GitHubin asiakirjat, yhdessä vapaan lähdekoodin kanssa. Heillä on myös demo-linkki, joten voit tutustu Tinglen toimintaan nähdä, soveltuuko se sivustoosi.

2. Vanilla Modal

Tässä on modaali, jonka löysin äskettäin ja se on paljon yksinkertaisempi kuin useimmat. Vanilla Modal on totta nimensä kanssa puhdas vanilaskirjoitus modaalin virransyöttö CSS-siirtymät.

Tämä asia on melko pieni ja erittäin joustava mukautettu CSS, jotta ikkunat voidaan palauttaa. Siinä on myös muutamia vaihtoehtoja, joita voit muuttaa JavaScriptin avulla, se on täydellinen DOM-toimintojen tai jopa soittotoimintojen käyttämiseen.

Ota kurkistus demo-sivu nähdä oletusasetuksen. Se on todella perussuunnittelu, joten se tulee vaativat mukautuksia käyttämään sitä tuotantopaikalla. Mutta tämä vähentää myös koko koodin vaatimuksia, joten se on yksi ohuimmista JavaScript-modaaleista.

3. plainModal

Jos haluat todella yksinkertaisen käsikirjoituksen, suosittelen plainModal. se on rakennettu jQueryyn, mutta se on yksi pienimmistä käytettävissä olevista modaaleista.

Se tekee älä käytä ulkoisia CSS- tai kuvatiedostoja. Tarvitset vain yhden JS-skriptin.

Kun PlainModal-komentosarja on lisätty sivullesi, vain kohdista modaalipainike ja olet hyvä mennä. Tämä antaa sinulle mahdollisuuden hallita näyttöä ja kuinka paljon haluat muuttaa modaaliliitäntää.

Plus, voit perustaa modaali yhdellä JavaScript-rivillä tämän pluginin minimalistisen teeman mukaisesti.

4. Modaal

Ei ole kieltävää saatavuus on valtava verkossa. Jokaisen suunnittelijan tavoitteen tulisi olla a kattavampi kokemus ihmisille eri puolilla maailmaa eri laitteissa ja mahdollisilla rajoituksilla.

Kanssa Modaal, saat siitä täydellisen kokemuksen läpäisee WCAG 2.0 -testin, jossa on kiinteä AA-esteettömyysluokka. Pääsivulla voi nähdä upean esimerkin sekä joitakin kooditietoja.

Kaiken kaikkiaan suosittelen tätä vanilja-JavaScript-laajennusta kaikille, jotka todella välittävät esteettömyydestä. AA-luokitusta voidaan vaatia joissakin web-projekteissa, joten Modaal on todella kätevä skripti kirjanmerkin säilyttämiseksi.

5. Scotch JS Modal

Scotch.io: n kehitystiimi julkaisee ohjaimia ja ohjaimia koodereille. Heidän työnsä on uskomatonta, ja se näkyy todella tämä JavaScript-modaaliskripti, joka sijaitsee Scotch GitHubissa.

Mod Wheel kehitti Ken Wheelerin ja tämän käsikirjoituksen on täydellinen opetusohjelma jos haluat tietää, miten se toimii. Vapaa koodi pitäisi kuitenkin riittää useimmille kehittäjille, koska tämä on erittäin kevyt ja helppo asentaa. Ei riippuvuuksia, ja jopa näyte-demoa CodePenissä.

6. Bootbox.js

Nopein tapa käynnistää uuden web-projektin on Bootstrapin kautta. Se on tehokas frontend-kehys, joka kannustaa kehittäjiä luo omia lisäosia kirjastoon.

Yksi tällainen esimerkki on Bootbox.js, pieni JavaScript-kirjasto, suunniteltu ainoastaan ​​modulaarisia ikkunoita varten Bootstrapissa. Se todella toimii valintaikkunoissa jos käyttäjä voi napsauttaa OK tai peruuttaa pyynnön perusteella.

Tyypilliset JavaScript-valintaikkunat ovat kauheasti, kuten hälytyslaatikot. Bootbox-skripti tarjoaa a vankka vaihtoehto kaikille BS3 / BS4-ekosysteemissä työskenteleville.

Jälleen, se on täysin vapaa ja avoin lähde, yhdessä a pitkä dokumentointisivu saada sinut nopeasti käyttöön.

7. iziModal.js

Jos sinä tarvitsemme hieman räätälöityä ratkaisua Tarkista iziModal.js. Tämä työkalu on täysin reagoiva ja suunniteltu toimivat kaikilla nykyaikaisilla selaimilla täydellisesti.

En ole vielä löytänyt toista modaaliskriptiä, joka tarjoaa niin esteettisesti miellyttävän muotoilun. Se tulee ulos portista upea käyttöliittymä, joka voi sulautua käytännöllisesti katsoen mihin tahansa verkkosivustoon. Voit kuitenkin myös uudelleensuunnittelu tarpeisiisi.

Huomaa tämä plugin ei juosta jQuery-ohjelmassa, niin se on yksi harvoista täällä on riippuvainen. Mutta jos haluat iziModal-tyylit, se on pieni hinta, joka maksaa tällaisista tyylikkäistä ikkunoista.

8. jQuery Modal

jQuery Modal plugin on ehkä yksinkertaisin modulaarinen skripti jQueryssä, jota et löydä koskaan.

Se voidaan ohjelmoida sitoutuu automaattisesti tiettyjen HTML-elementtien kanssa perustuu eri ominaisuuksiin. Se myös tukee pikanäppäimiä kuten ESC ikkunan sulkemiseksi.

Yhteensä tämä laajennus toimenpiteet ovat alle 1 KB ja se toimii kaikissa mahdollisissa selaimissa, joita voit kuvitella. jQuery-kehittäjien tulisi säilyttää tämä plugin tallennettuna, jotta pääset helposti yksinkertaiselle modaaliskriptille ilman ylimääräisiä koristuksia.

9. PicoModal

Palaa kohti vanilja-JavaScriptia, meillä on PicoModal-kirjasto. Tämä on luultavasti yksi pienimmistä skripteistä ja se on suunniteltu ajaa täydellisesti vanilja JavaScript selkärangan.

Se tukee kaikkia nykyaikaisia ​​selaimia, mukaan lukien mobiiliselaimet Androidille ja Mobile Safarille iOS: lle. Se tukee jopa vanhempia IE-selaimia, jotka ovat peräisin IE7: stä!

PicoModalin kehittäjä luonut pienen JSfiddle-skriptin osoittaa, miten se toimii. Tämä on hyvin pieni esimerkki ja se on ei ole sidottu napsautustapahtumaan tai mihinkään muuhun, mutta se ei ole vaikeaa käsikirjoituksen muutamispainikkeilla suorittaa tämä modaaliikkuna oikein.

10. Avgrund

Avgrund on luultavasti yksi tämän luettelon ainutlaatuisimmista muodoista. Se käyttää a mukautetun sivun häipymisvaikutus sekä kutistuva animaatio tuomaan modaalin oikealle.

Kaikki eivät arvosta tätä animaatiota, joten en voi sanoa, että tämä skripti sopisi jokaiseen sivustoon. Mutta se on a puhdas vanilja-modaali ja se on erittäin helppo asentaa, vain CSS: n ja JavaScript-tiedoston avullae.

Katsokaa demo-sivu nähdä, miten se toimii. Se on varmasti ainutlaatuinen tyyli ja se on kiinnitettävä huomiota mukautettujen animaatioiden kanssa.

Lopulliset sanat

Riippumatta siitä, mitä etsit, panostan, että tässä luettelossa on jotain tarpeidesi mukaista. Mutta jos et vieläkään ole tyytyväinen selaa GitHubia liittyviin modaalisiin komentosarjoihin ja katso, mitä muuta löydät.