10 voľných pluginov modálneho okna pre jazyk JavaScript

Môžeš nájsť veľa čistých CSS modulov ale tieto neponúka rovnakú kontrolu ako JavaScript. Pomocou modálu jazyka JavaScript môžete pridávať vlastné animácie, vstupy používateľského rozhrania a skutočne vylepšiť zážitok používateľa.

Ale prečo navrhnúť niečo od začiatku môžete použiť knižnicu JS? Zozbieral som najlepšie modálne skripty s podporou jazyka JavaScript Tu si môžete prečítať a vyzdvihnúť svoje obľúbené.

To všetko sú úplne zadarmo a open-source, takže môžete kód upraviť a upraviť tak, aby vyhovoval vašim stránkam podľa potreby.

1. Tingle

Jeden z mojich obľúbených voľných modálnych skriptov je Tingle.js. to je postavená na vanilke JavaScript bez závislostí, takže nepotrebujete žiadne knižnice jQuery ani Zepto.

Navyše je to dosť malá knižnica, hoci to má veľa možností prispôsobenia. Môžete zmeniť prechody CSS, modálne animácie jazyka JavaScript a celý používateľský zážitok len s niekoľkými nastaveniami.

Tingle.js je navrhnutý tak, aby bol plne prístupné a reagujúce, funguje tak aj na mobilných zariadeniach a podporuje staršie prehliadače.

Môžeš vidieť všetky dokumenty o GitHub, spolu s voľným zdrojovým kódom. Majú tiež demo link, takže môžete pozrite sa na tingle v akcii či sa to môže stať na vašich webových stránkach.

2. Vanilkový modál

Tu je spôsob, ktorý som nedávno našiel a je to oveľa jednoduchšie ako väčšina. Vanilka Modal stoja verne svojmu menu s čistý vanilkový skript napájanie modálneho, spolu s CSS prechodov.

Táto vec je dosť malá a super flexibilná vlastné CSS na zmenu okien. Má tiež pomerne málo možností, ktoré môžete zmeniť pomocou jazyka JavaScript, takže je ideálny pre spustenie funkcií DOM alebo dokonca funkcií spätného volania.

Pozrite sa na demo stránka zobraziť predvolený štýl. Je to naozaj základný dizajn, takže to bude vyžadovať prispôsobenia na použitie na výrobnom mieste. Ale to tiež znižuje celkové požiadavky na kód, tak to je jeden z najtenších modálnych knižníc jazyka JavaScript.

3. plainModal

Ak chcete veľmi jednoduchý skript, odporúčam plainModal. to je postavený na jQuery, ale je to jeden z najmenších dostupných modálnych skriptov.

Robí nepoužívajte žiadne externé CSS alebo obrazové súbory. Jediný JS skript je všetko, čo potrebujete.

Akonáhle je skript plainModal pridaný do vašej stránky, práve ste zacieliť na tlačidlo modálneho a máte dobré ísť. To vám dáva kontrolu nad zobrazením a koľko chcete zmeniť modálne rozhranie.

Navyše môžete nastavte modal s jedným riadkom jazyka JavaScript zachovávajúc minimalistickú tému tohto pluginu.

4. Modal

Nie je to popieranie dostupnosť je obrovská na webe. Každý dizajnérsky cieľ by mal byť viac inkluzívnejšej skúsenosti pre ľudí po celom svete na rôznych zariadeniach a s možnými obmedzeniami.

s Modaal, dostanete to dokonalé skúsenosti, ktoré prejde test WCAG 2.0 s pevným stupňom prístupnosti AA. Na hlavnej stránke si môžete pozrieť fantastický príklad spolu s nejakou kódovou dokumentáciou.

Celkovo doporučujem tento doplnok Java vanilky pre každého, kto sa skutočne stará o prístupnosť. Hodnotenie AA sa môže vyžadovať pri niektorých webových projektoch, takže Modaal je naozaj skvelý skript, ktorý má mať záložku.

5. Scotch JS Modal

Vývojový tím spoločnosti Scotch.io publikuje návody a príručky pre kodéry. Ich práca je neuveriteľná a naozaj sa ukazuje tento modálny skript JavaScript, ktorý je umiestnený na škótskom GitHub.

Modál vyvinul Ken Wheeler a tento scenár dokonca má úplný návod ak sa chcete dozvedieť, ako to funguje. Voľný kód by však mal stačiť pre väčšinu vývojárov veľmi ľahké a ľahko nastaviteľné. Žiadne závislosti a dokonca vzorové demo na CodePen.

6. Bootbox.js

Najrýchlejší spôsob, ako spustiť nový webový projekt je cez Bootstrap. Je to mocný rámec frontend, ktorý podporuje vývojárov vytvorte vlastné doplnky do knižnice.

Jedným z takýchto príkladov je Bootbox.js, malá knižnica JavaScript, určený výhradne pre modálne okná v Bootstrap. V skutočnosti pracuje na dialógových oknách kde môže používateľ na základe vašej požiadavky kliknúť na tlačidlo OK alebo zrušiť.

Typické dialógy jazyka JavaScript sú strašné, rovnako ako výstražné okná. Skript Bootbox ponúka a solídnou alternatívou pre každého, kto pracuje v ekosystéme BS3 / BS4.

Opäť je to úplne zadarmo a open-source, spolu s a dlhú dokumentačnú stránku aby vás rýchlo.

7. iziModal.js

Ak ty potrebujete riešenie trochu viac prispôsobené odhlásiť sa iziModal.js. Tento nástroj je plne reagovať a určené na pracujú perfektne vo všetkých moderných prehliadačoch.

Ešte som našiel iný modálny skript, ktorý ponúka taký esteticky príjemný dizajn. Vyjde z brány s nádherné používateľské rozhranie, ktoré sa môže miešať do prakticky ľubovoľných webových stránok. Môžete to však tiež zmeniť dizajn aby vyhovovali vašim potrebám.

Stačí si uvedomiť tento plugin beží na jQuery, tak to je jeden z mála tu má závislosť. Ale ak chcete iziModal štýly, je to malá cena, ktorú zaplatíte za také elegantné okná.

8. jQuery Modal

doplnok jQuery Modal je možno najjednoduchší modálny skript na jQuery, aký kedy nájdete.

Je možné ho naprogramovať automaticky viazať s určitými prvkami HTML založené na rôznych atribútoch. To tiež podporuje klávesové skratky ako napríklad ESC na zatvorenie okna.

Celkom tento doplnok opatrenia menej ako 1 kB a to pracuje v každom možnom prehliadači, ktorý si dokážete predstaviť. jQuery vývojári by mali zachovať tento plugin uložený pre rýchly prístup k jednoduchému modálnemu skriptu bez extra výbavy.

9. PicoModal

Ako sa vrátiť k vanilke JavaScript, máme PicoModal knižnica. To je pravdepodobne jeden z najmenších skriptov, ktorý nájdete a je určený pre bežať perfektne na chrbticovej skrinke Java.

to podporuje všetky moderné prehliadače, vrátane mobilných prehliadačov pre Android a Mobile Safari pre iOS. Podporuje aj staršie prehliadače IE, ktoré sa datujú od IE7!

Vývojár spoločnosti PicoModal vytvoril malý skript JSfiddle demonštrovať, ako funguje. Toto je veľmi malý príklad a je to nie je viazaná na udalosť kliknutia alebo na nič iné, ale nie je to ťažké skriptu v niekoľkých prepínacích tlačidlách spustiť správne toto modálne okno.

10. Avgrund

Avgrund je pravdepodobne jedným z najviac unikátnych spôsobov v tomto zozname. Používa a vlastný efekt vyblednutia stránky spolu so zmenšujúcou sa animáciou aby sa zohľadnilo pravidlo modálov.

Nie všetci ocenia túto animáciu, takže nemôžem povedať, že tento skript by sa hodil na všetky webové stránky. Ale je to čistá vanilková moda a je veľmi jednoduché nastaviť, s iba CSS a JavaScript file.

Pozrite sa na demo stránka vidieť, ako to beží. Určite má jedinečný štýl a je nútená upútať pozornosť s vlastnými animáciami, ktoré práve fungujú.

Záverečné slová

Bez ohľadu na to, čo hľadáte, stavím sa, že niečo v tomto zozname vyhovuje vašim potrebám. Ale ak ešte nie ste spokojný prehliadajte GitHub pre súvisiace modálne skripty a uvidíte, čo ešte nájdete.