10 ingyenes JavaScript modális ablakcsatlakozó

Találhatod sok tiszta CSS modal de ezek nem ajánlja ugyanazt az ellenőrzést, mint a JavaScript. A JavaScript modal segítségével hozzáadhat egyéni animációkat, felhasználói felület bemeneteket, és valóban növelheti a felhasználói élményt.

De miért tervezz valamit a semmiből, amikor használhat egy JS könyvtárat? Összegyűjtöttem legjobb ingyenes JavaScript-alapú modális szkriptek itt, hogy megismerje és kiemelje kedvencét.

Mindezek teljesen szabad és nyílt forráskódú, így szerkesztheti a kódot, és szükség szerint újrakezdheti azokat a webhelyére.

1. Tingle

Az egyik kedvenc ingyenes modális szkriptem Tingle.js. ez vanília JavaScript-re épül, függőség nélkül, így nincs szükség jQuery vagy Zepto könyvtárra.

Plusz, ez egy meglehetősen kicsi könyvtár, bár van sok lehetőség a testreszabásra. Néhány beállítással módosíthatja a CSS átmenetet, a JavaScript modális animációit és a teljes felhasználói élményt.

A Tingle.js célja, hogy legyen teljesen hozzáférhető és érzékeny, így működik a mobil eszközökön és támogatja a régebbi böngészőket is.

Láthatod a GitHub összes dokumentációját, az ingyenes forráskóddal együtt. Demó linkjük is van, így lehet nézd meg Tingle-t akcióban hogy megtudja, hogy illeszkedik-e a webhelyére.

2. Vanília modal

Itt van egy modál, amit mostanában találtam meg, és ez sokkal egyszerűbb, mint a legtöbb. Vanilla Modal a névvel igaz tiszta vanília script a modális tápellátása CSS átmenetek.

Ez a dolog elég kicsi és szuper rugalmas egyéni CSS az ablakok újrafogalmazásához. Ez is van meglehetősen kevés lehetőség van a JavaScript használatával, tökéletes a DOM funkciók vagy a visszahívási funkciók futtatásához.

Keress egy pillantást a demóoldal az alapértelmezett stílus megtekintéséhez. Ez egy igazán alapvető tervezés, így lesz igényelnek testreszabásokat a termelési helyszínen történő használathoz. Ez azonban csökkenti a teljes kódkövetelményeket, így ez az az egyik legvékonyabb JavaScript modális könyvtár.

3. plainModal

Ha nagyon egyszerű szkriptet akarsz, nagyon ajánlom plainModal. Ez a jQuery-re épült, de ez az egyik legkisebb modális parancsfájl.

Igen nem használhat külső CSS vagy képfájlokat. Csak egy egyetlen JS szkript szükséges.

Miután a plainModal parancsfájlt hozzáadta az oldaladhoz, csak célozza a modális gombot és jó, hogy menjen. Ez lehetővé teszi a kijelző felett történő vezérlést és azt, hogy mennyit akar módosítani a modális felületen.

Plusz, tudod állítsa be a modalt egy JavaScript-sorral a plugin minimalista témájával.

4. Modaal

Nem tagadható a hozzáférhetőség hatalmas az interneten. Minden tervező célja a inkluzívabb tapasztalat a világ minden tájáról érkező emberek számára különböző eszközökön és lehetséges korlátozásokkal.

Val vel Modaal, ezt a tökéletes élményt kapod átadja a WCAG 2.0 tesztet egy szilárd AA hozzáférhetőségi besorolással. Egy fantasztikus példa látható a főoldalon, néhány kóddokumentációval együtt.

Összességében javaslom ezt a vanilla JavaScript plugint mindenkinek, aki igazán törődik az elérhetőséggel. Néhány webprojektnél az AA besorolás szükséges, így a Modaal egy igazán praktikus szkript, amely a könyvjelzőket megőrzi.

5. Scotch JS Modal

A Scotch.io fejlesztői csapata oktatókat és útmutatókat tesz közzé a kódolók számára. Munkájuk hihetetlen, és valóban megmutatkozik ez a JavaScript modális szkript, amely a Scotch GitHub-on található.

A modalt Ken Wheeler és ez a szkript fejlesztette ki van egy teljes bemutatója ha meg akarod tanulni, hogyan működik. Azonban a szabad kódnak elegendőnek kell lennie a legtöbb fejlesztő számára, mivel ez az szuper könnyű és könnyen beállítható. Nincsenek függőségek, és még egy minta demó a CodePen-en.

6. Bootbox.js

A leggyorsabb út új webes projekt indítása a Bootstrap-on keresztül. Ez egy erős frontend keretrendszer, amely ösztönzi a fejlesztőket hozzon létre saját bővítményeket a könyvtárhoz.

Az egyik ilyen példa Bootbox.js, egy kis JavaScript-könyvtár, Kizárólag a Bootstrap modális ablakaihoz tervezték. Valójában párbeszédpaneleken működik ahol a felhasználó az OK-ra kattint, vagy a kérés alapján törölheti.

A tipikus JavaScript párbeszédablakok szörnyűek, csakúgy, mint a riasztó dobozok. A Bootbox szkript a szilárd alternatíva a BS3 / BS4 ökoszisztémában dolgozók számára.

Ismét ez teljesen szabad és nyílt forráskódú, együtt a hosszú dokumentációs oldal gyorsan és gyorsan fut.

7. iziModal.js

Ha te szükség van egy kicsit testreszabottabb megoldásra nézd meg iziModal.js. Ez az eszköz teljesen érzékeny és tervezték tökéletesen működik minden modern böngészőben.

Még nem találtam egy másik modális szkriptet, amely egy ilyen esztétikailag tetszetős designt kínál. A kapuból egy gyönyörű felhasználói felület, amely gyakorlatilag bármilyen webhelyhez illeszkedik. Lehet azonban a design megújítása is az Ön igényeinek megfelelően.

Csak vegye figyelembe ezt a bővítményt nem fut a jQuery-n, szóval ez az egyik kevés itt függ. De ha az iziModal stílusokat akarod, akkor egy kis árat fizetni az ilyen elegáns ablakokért.

8. jQuery Modal

A jQuery Modal bővítmény talán az a legegyszerűbb modális szkript a jQuery-nél, amit valaha talál.

Ez programozható automatikusan kötődik bizonyos HTML-elemekhez különböző attribútumok alapján. Az is támogatja a billentyűparancsokat például az ESC az ablak bezárásához.

Összességében ez a bővítmény 1KB-nél kisebb mértékű és az minden lehetséges böngészőben működik. A jQuery fejlesztőknek meg kell őrizniük ezt a bővítményt, hogy gyors hozzáférést biztosítsanak egy egyszerű modális parancsfájlhoz anélkül, hogy az extra kényeztetés nélkül.

9. PicoModal

Visszatérve a vaníliás JavaScript-hez, van a PicoModal könyvtár. Ez valószínűleg az egyik legkisebb szkript, amit megtalál, és úgy tervezték tökéletesen fut a vanília JavaScript gerincén.

Azt támogatja az összes modern böngészőt, beleértve az Android és a Mobile Safari mobil böngészőit az iOS számára. Még az IE7-ből származó régebbi IE böngészőket is támogatja!

PicoModal fejlesztője létrehozott egy kis JSfiddle parancsfájlt hogy megmutassa, hogyan működik. Ez egy nagyon kis példa, és ez nem kapcsolódik egy kattintáses eseményhez vagy bármi máshoz, de nem nehéz parancsfájl néhány gombnyomással megfelelően futtathatja ezt a modális ablakot.

10. Avgrund

Avgrund valószínűleg az egyik legegyedibb modális a listában. Használ egy egyéni oldalfekélyesítő hatás, valamint csökkenő animáció hogy a modális jobbra nézzen.

Nem mindenki értékelni fogja ezt az animációt, így nem mondhatom, hogy ez a szkript minden webhelyre illik. De ez egy tiszta vanília modal és szuper könnyű beállítani, csak egy CSS és egy JavaScript file.

Vessen egy pillantást a demóoldal látni, hogyan fut. Ez minden bizonnyal egyedülálló stílusban van meg kell ragadnia a figyelmet az egyéni animációkkal, amelyek csak működnek.

Végső szavak

Nem számít, mit keresel, fogadok, hogy van valami a listán, hogy megfeleljen az Ön igényeinek. De ha még mindig nem elégedett Keresse meg a GitHub-ot a kapcsolódó modális szkriptekhez és nézd meg, mit találhat még.