10 Gratis JavaScript Modal Window Plugins

Du kan hitta massor av rena CSS-modeller men dessa erbjuder inte samma kontroll som JavaScript. Med en JavaScript-modal kan du lägga till anpassade animeringar, UI-ingångar och verkligen förbättra användarupplevelsen.

Men varför utforma något från början när du kan använda ett JS-bibliotek? Jag har samlat in bästa gratis JavaScript-drivna modala skript här för att du ska läsa igenom och lägga ut dina favoriter.

Alla dessa är helt gratis och öppen källkod, så du kan redigera koden och återställa dem så att de passar din webbplats efter behov.

1. Tingle

En av mina favoritfria modala skript är Tingle.js. Dess byggd på vanilj JavaScript utan beroenden, så du behöver inte några jQuery- eller Zepto-bibliotek.

Dessutom är det ett ganska litet bibliotek, även om det har många alternativ för anpassning. Du kan ändra CSS-övergångarna, JavaScript-modalanimationerna och hela användarupplevelsen med bara några inställningar.

Tingle.js är utformad för att vara fullt tillgänglig och lyhörd, så det fungerar på mobila enheter och stöder också äldre webbläsare.

Du kan se all dokumentation på GitHub, tillsammans med fri källkod. De har också en demo länk, så du kan kolla in Tingle i aktion för att se om det skulle passa på din webbplats.

2. Vaniljmodell

Här är en modal som jag just hittat nyligen och det är en hel del enklare än de flesta. Vaniljmodell står trogen mot sitt namn med a ren vaniljskript driva modal, tillsammans med CSS-övergångar.

Denna sak är ganska liten och super flexibel med anpassad CSS för att återställa fönstren. Det har också En hel del alternativ du kan ändra med JavaScript, gör det perfekt för att köra DOM-funktioner eller till och med återuppringningsfunktioner.

Ta en titt på demo sida för att se standardstilen. Det är en riktigt grundläggande design, så det blir det kräva anpassningar för att använda den på en produktionsplats. Men det här skär också ner på de totala kodkraven, så det är det ett av de smalaste JavaScript-modala biblioteken.

3. plainModal

Om du vill ha ett riktigt enkelt manus rekommenderar jag starkt plainModal. Det är byggt på jQuery, men det är en av de minsta modala skript som finns tillgängliga.

Det gör det Använd inte externa CSS- eller bildfiler. Bara ett enda JS-skript är allt du behöver.

När plainModal-skriptet har lagts till på din sida, så är du bara rikta modalknappen och du är bra att gå. Detta ger dig kontroll över displayen och hur mycket du vill ändra det modala gränssnittet.

Plus, du kan konfigurera modal med en rad JavaScript hålla med det minimalistiska temat för denna plugin.

4. Modaal

Det kan inte nekas tillgängligheten är enorm på webben. Varje designers mål bör vara en mer inkluderande erfarenhet för människor runt om i världen på olika enheter och med möjliga begränsningar.

Med Modaal, du får den perfekta upplevelsen som skickar WCAG 2.0-testet med en solid AA-tillgänglighetsbetyg. Du kan se ett fantastiskt exempel på huvudsidan, tillsammans med en del koddokumentation.

Totalt rekommenderar jag det här vanilj JavaScript plugin för alla som verkligen bryr sig om tillgänglighet. AA-betyget kan krävas på vissa webbprojekt, så Modaal är ett riktigt användbart skript för att hålla bokmärkt.

5. Scotch JS Modal

Utvecklingslaget vid Scotch.io publicerar handledning och guider för kodare. Deras arbete är otroligt och det visar verkligen Detta JavaScript-modalskript, värd på Scotch GitHub.

Modalet utvecklades av Ken Wheeler och det här skriptet ens har en fullständig handledning om du vill lära dig hur det fungerar. Den fria koden borde dock vara tillräcklig för de flesta utvecklare eftersom det här är super lätt och lätt att ställa in. Inga beroenden, och till och med en provdemo på CodePen.

6. Bootbox.js

Det snabbaste sättet att starta ett nytt webbprojekt är genom Bootstrap. Det är en kraftfull frontendram som uppmuntrar utvecklare till skapa egna tillägg till biblioteket.

Ett sådant exempel är Bootbox.js, ett litet JavaScript-bibliotek, utformad enbart för modala fönster i Bootstrap. Det faktiskt fungerar på dialogrutor där användaren kan klicka på OK eller avbryta, baserat på din förfrågan.

Typiska JavaScript-dialogrutor är hemska, precis som alertboxar. Bootbox-skriptet erbjuder a solidt alternativ för alla som arbetar i BS3 / BS4 ekosystemet.

Återigen är det helt gratis och öppen källkod, tillsammans med a lång dokumentationssida för att få dig upp och springa fort.

7. iziModal.js

Om du behöver en lösning lite mer anpassad checka ut iziModal.js. Detta verktyg är fullt mottaglig och utformad för att arbeta perfekt i alla moderna webbläsare.

Jag har ännu inte hittat ett annat modalskript som erbjuder en sådan estetiskt tilltalande design. Det kommer ut porten med a underbara användargränssnitt som kan blandas i praktiskt taget vilken som helst webbplats. Men du kan Restyler också designen för att passa dina behov.

Notera bara detta plugin körs på jQuery, så det är en av de få här det har ett beroende. Men om du vill ha iziModal-stilerna är det ett litet pris att betala för sådana slanka popover-fönster.

8. jQuery Modal

De jQuery Modal plugin är kanske den enklaste modala scriptet på jQuery hittar du någonsin.

Det kan programmeras till binda automatiskt till vissa HTML-element baserat på olika attribut. Det är också stöder tangentbordsgenvägar som ESC för att stänga fönstret.

Totalt, det här plugin mäter mindre än 1 KB och det fungerar i alla möjliga webbläsare du kan tänka dig. jQuery-utvecklare borde hålla det här pluginet sparat för snabb åtkomst till ett enkelt modalskript utan extra krusiduller.

9. PicoModal

Kommer tillbaka mot vanilj JavaScript, vi har PicoModal-biblioteket. Detta är förmodligen ett av de minsta skript som du hittar och det är utformat för kör perfekt på en vanilj JavaScript-ryggraden.

Det stöder alla moderna webbläsare, inklusive mobila webbläsare för Android och Mobile Safari för iOS. Den stöder även äldre IE-webbläsare, som går tillbaka till IE7!

PicoModals utvecklare skapade ett litet JSfiddle-skript för att visa hur det fungerar. Detta är ett mycket litet exempel och det är det inte knuten till ett klickhändelse eller något annat, men det är inte svårt att skript i några knappar att köra detta modala fönster korrekt.

10. Avgrund

Avgrund är förmodligen en av de mest unika modellerna i den här listan. Det använder en anpassad sidafading effekt, tillsammans med en krympande animering för att få modal rätt in i sikte.

Inte alla kommer att uppskatta denna animering, så jag kan inte säga att det här skriptet skulle passa alla webbplatser. Men det är en ren vaniljmodell och det är super lätt att installera, med bara en CSS och en JavaScript-file.

Ta en titt på demo sida för att se hur det går. Det har verkligen en unik stil och är bunden att fånga uppmärksamhet med de anpassade animationerna som bara fungerar.

Slutliga ord

Oavsett vad du letar efter, jag satsar på att det finns något i listan som passar dina behov. Men om du fortfarande inte är nöjd bläddra igenom GitHub för relaterade modala skript och se vad du kan hitta.