10 Free JavaScript Modal Window Pluginy

Můžeš najít spousta čistých CSS modálů ale tyto nenabízejí stejnou kontrolu jako JavaScript. Díky modálnímu JavaScriptu můžete přidávat vlastní animace, vstupy do uživatelského rozhraní a skutečně zvyšovat uživatelský komfort.

Ale proč navrhnout něco od nuly, když můžete použít knihovnu JS? Shromáždil jsem nejlepší zdarma JavaScript-powered modální skripty zde si můžete prohlédnout a vybrat si své oblíbené.

To vše jsou zcela zdarma a open-source, takže můžete kód upravit a podle potřeby upravit tak, aby vyhovoval vašim stránkám.

1. Tingle

Jeden z mých oblíbených modálních skriptů je Tingle.js. To je postavený na vanillovém JavaScriptu bez závislostí, takže nepotřebujete žádné knihovny jQuery nebo Zepto.

Navíc je to poměrně malá knihovna, i když to má mnoho možností pro přizpůsobení. Můžete změnit CSS přechody, JavaScript modální animace a celý uživatelský zážitek jen s několika nastaveními.

Tingle.js má být plně přístupné a citlivé, funguje tak na mobilních zařízeních a podporuje i starší prohlížeče.

Můžeš vidět veškerou dokumentaci na GitHub, spolu s volným zdrojovým kódem. Mají také demo odkaz, takže můžete podívejte se na Tingle v akci zjistit, zda se vejde na vaše webové stránky.

2. Vanilka Modal

Tady je modál, který jsem nedávno našel a je to mnohem jednodušší než většina ostatních. Vanilka Modal stojí věrně svému jménu a čistý vanilkový skript napájení modálu, spolu s CSS přechody.

Tato věc je docela malá a super flexibilní, s Vlastní CSS restyle okna. Má také docela málo možností, které můžete změnit pomocí JavaScriptu, takže je ideální pro spouštění DOM funkcí nebo dokonce funkce zpětného volání.

Podívejte se na demo stránka zobrazíte výchozí styl. Je to opravdu základní design, takže to bude vyžadovat přizpůsobení k použití na výrobním místě. Ale to také snižuje požadavky na celkový kód, takže je to jedna z nejtenčích JavaScriptových modálních knihoven.

3. plainModal

Pokud chcete opravdu jednoduchý skript vřele doporučuji plainModal. to je postavený na jQuery, ale je to jeden z nejmenších dostupných modálních skriptů.

To dělá nepoužívejte žádné externí CSS nebo obrazové soubory. Stačí jen jeden JS skript.

Jakmile je skript plainModal přidán na vaši stránku, stačí cílové modální tlačítko a je dobré jít. To vám dává kontrolu nad displejem a kolik chcete změnit modální rozhraní.

Plus, můžete nastavit modální s jedním řádkem JavaScriptu s minimalistickým tématem tohoto pluginu.

4. Modaal

Není popírání přístupnost je obrovská na webu. Cílem každého designéra by mělo být a širší zkušenosti pro lidi na celém světě na různých zařízeních & s možnými omezeními.

S Modaal, získáte ten dokonalý zážitek, který splňuje test WCAG 2.0 s pevným ratingem AA přístupnosti. Na hlavní stránce můžete vidět fantastický příklad spolu s nějakou dokumentací kódu.

Celkově doporučuji tento vanilla JavaScript plugin pro každého, kdo se opravdu stará o dostupnost. Hodnocení AA může být vyžadováno na některých webových projektech, takže Modaal je opravdu šikovný skript, který umožňuje udržovat záložky.

5. Skot JS Modal

Vývojový tým Scotch.io vydává návody a návody pro kodéry. Jejich práce je neuvěřitelná a opravdu se to projevuje tento JavaScript modální skript, hostovaný na Scotch GitHub.

Modal byl vyvinut Ken Wheelerem a tento skript dokonce má úplný návod Pokud se chcete dozvědět, jak to funguje. Volný kód by však měl být pro většinu vývojářů dostačující super lehký a snadno nastavitelný. Žádné závislosti a dokonce ukázkové demo na CodePen.

6. Bootbox.js

Nejrychlejší cesta zahájit nový webový projekt je přes Bootstrap. Je to silný frontend framework, který podporuje vývojáře vytvořte si vlastní doplňky do knihovny.

Jeden takový příklad je Bootbox.js, malá knihovna JavaScriptu, určen pouze pro modální okna v Bootstrapu. Vlastně pracuje na dialogových oknech kde uživatel může kliknout na OK nebo zrušit, na základě vašeho požadavku.

Typická dialogová okna JavaScriptu jsou hrozná, stejně jako výstražné boxy. Skript Bootbox nabízí a alternativou pro každého, kdo pracuje v ekosystému BS3 / BS4.

Opět je to zcela zdarma a open-source, spolu s zdlouhavé dokumentace , aby vás rychle a rychle.

7. iziModal.js

jestli ty potřebují řešení trochu více přizpůsobené Překontrolovat iziModal.js. Tento nástroj je plně reagující a navržen tak, aby dokonale fungují ve všech moderních prohlížečích.

Ještě jsem nenašel jiný modální scénář, který nabízí takový esteticky příjemný design. Vychází z brány s nádherné uživatelské rozhraní, které lze vmísit do prakticky jakékoli webové stránky. Nicméně, můžete také restyle design vyhovuje vašim potřebám.

Stačí si poznamenat tento plugin běží na jQuery, takže je to jedna z mála má závislost. Ale pokud chcete iziModal styly je to malá cena zaplatit za takové elegantní popover okna.

8. jQuery Modal

jQuery Modální plugin je možná nejjednodušší modální skript na jQuery, který kdy najdete.

Může být naprogramován automaticky vázat s některými prvky HTML založené na různých atributech. To také podporuje klávesové zkratky například ESC pro zavření okna.

Celkem tento plugin měří méně než 1KB a to funguje v každém možném prohlížeči, který si dokážete představit. Vývojáři jQuery by měli tento plugin zachovat pro rychlý přístup k jednoduchému modálnímu skriptu bez zbytečných kudrlinek.

9. PicoModal

Vracíme se k vanilkové JavaScript, máme Knihovna PicoModal. To je pravděpodobně jeden z nejmenších skriptů, které najdete a je navržen tak, aby běží perfektně na vanilkové páteři JavaScriptu.

To podporuje všechny moderní prohlížeče, včetně mobilních prohlížečů pro Android a Mobile Safari pro iOS. Podporuje i starší prohlížeče IE, které se datují do IE7!

Vývojář společnosti PicoModal vytvořil malý skript JSfiddle ukázat, jak to funguje. To je velmi malý příklad a je to není vázána na událost kliknutí ani na nic jiného, ale není to těžké skript v několika přepínacích tlačítkách správně spustit toto modální okno.

10. Avgrund

Avgrund je pravděpodobně jedním z nejunikátnějších modálů v tomto seznamu. Používá Vlastní efekt mizení stránky spolu se zmenšující se animací do modálního práva.

Ne každý ocení tuto animaci, takže nemohu říci, že by tento skript zapadl do každé webové stránky. Ale je to čistý vanilkový modal a je to super snadné nastavení, jen s CSS a JavaScript souboremE.

Podívejte se na demo stránka vidět, jak to běží. Je to určitě jedinečný styl a je musí upoutat pozornost s vlastními animacemi, které fungují.

Závěrečná slova

Bez ohledu na to, co hledáte, vsadím se, že něco v tomto seznamu vyhovuje vašim potřebám. Ale pokud ještě nejste spokojeni procházet GitHub pro související modální skripty a zjistit, co ještě můžete najít.