10 Gratis JavaScript Modal Window Plugins

Du kan finde masser af rene CSS-modeller men disse tilbyder ikke den samme kontrol som JavaScript. Med en JavaScript-modal kan du tilføje brugerdefinerede animationer, UI-indgange og virkelig forbedre brugeroplevelsen.

Men hvorfor design noget fra bunden, når Du kan bruge et JS-bibliotek? Jeg har indsamlet bedste gratis JavaScript-drevne modale scripts her for dig at gennemgå og single ud dine favoritter.

Alle disse er helt fri og åben kilde, så du kan redigere koden og restylle dem for at passe til dit websted efter behov.

1. Tingle

Et af mine foretrukne gratis modale scripts er Tingle.js. Det er bygget på vanille JavaScript uden afhængigheder, så du behøver ikke nogen jQuery eller Zepto biblioteker.

Plus, det er et ret lille bibliotek, selv om det har en masse muligheder for tilpasning. Du kan ændre CSS-overgange, JavaScript-modal animationerne og hele brugeroplevelsen med blot et par indstillinger.

Tingle.js er designet til at være fuldt tilgængelig og lydhør, så det virker på mobile enheder og understøtter også ældre browsere.

Du kan se al dokumentation på GitHub, sammen med den frie kildekode. De har også en demo link, så du kan tjekke Tingle i aktion for at se om det kunne passe på din hjemmeside.

2. Vanille Modal

Her er en modal, jeg lige har fundet for nylig, og det er en hel del enklere end de fleste. Vanille Modal står tro mod navnet med a ren vanille script drev modal, sammen med CSS overgange.

Denne ting er temmelig lille og super fleksibel med brugerdefineret CSS til at genindstille vinduerne. Det har også En hel del muligheder du kan ændre med JavaScript, gør det perfekt til at køre DOM-funktioner eller endda tilbagekaldsfunktioner.

Tag et kig på demo side for at se standardstilen. Det er et rigtig grundlæggende design, så det bliver det kræver tilpassninger til at bruge det på et produktionssted. Men dette skærer også ned på de samlede kode krav, så det er et af de mindste JavaScript-modalbiblioteker.

3. plainModal

Hvis du vil have et virkelig simpelt script, anbefaler jeg stærkt plainModal. det er bygget på jQuery, men det er et af de mindste modale scripts til rådighed.

Det gør det Brug ikke eksterne CSS- eller billedfiler. Kun et enkelt JS script er alt hvad du behøver.

Når plainModal-scriptet er tilføjet til din side, er du bare mål mod modalknappen og du er god at gå. Dette giver dig kontrol over skærmen og hvor meget du vil ændre den modale grænseflade.

Plus, du kan konfigurere modal med en linje af JavaScript holde med det minimalistiske tema for dette plugin.

4. Modaal

Der er ingen benægtelse tilgængelighed er enorm på nettet. Hver designers mål skal være en mere rummelig oplevelse for mennesker rundt om i verden på forskellige enheder og med mulige begrænsninger.

Med Modaal, du får den perfekte oplevelse som passerer WCAG 2.0 testen med en solid AA tilgængelighed rating. Du kan se et fantastisk eksempel på hovedsiden sammen med nogle kodedokumenter.

Samlet set anbefaler jeg denne vanilla JavaScript plugin for alle, der virkelig bekymrer sig om tilgængelighed. AA-rating kan kræves på nogle webprojekter, så Modaal er et rigtig handy script til at holde bogmærket.

5. Scotch JS Modal

Udviklingsholdet på Scotch.io offentliggør vejledninger og vejledninger til kodere. Deres arbejde er utroligt, og det viser virkelig Dette JavaScript modal script, der er hostet på Scotch GitHub.

Modal blev udviklet af Ken Wheeler og dette script selv har en komplet vejledning hvis du vil lære hvordan det virker. Den gratis kode skal dog være nok for de fleste udviklere, da dette er tilfældet super letvægts og nem at konfigurere. Ingen afhængigheder, og endda en prøve demo på CodePen.

6. Bootbox.js

Den hurtigste måde at lancere et nyt webprojekt er gennem Bootstrap. Det er en kraftig frontend ramme, der opfordrer udviklere til oprette deres egne tilføjelser til biblioteket.

Et sådant eksempel er Bootbox.js, et lille JavaScript-bibliotek, designet udelukkende til modale vinduer i Bootstrap. Det faktisk fungerer på dialogbokse hvor brugeren kan klikke på OK eller annullere, baseret på din anmodning.

Typiske JavaScript-dialoger er forfærdelige, ligesom advarselsbokse. Bootbox scriptet tilbyder a solidt alternativ til alle, der arbejder i BS3 / BS4 økosystemet.

Igen er det helt fri og open source, sammen med a lang dokumentationsside at få dig op og køre hurtigt.

7. iziModal.js

hvis du brug for en løsning lidt mere tilpasset check ud iziModal.js. Dette værktøj er fuldt lydhør og designet til arbejde perfekt i alle moderne browsere.

Jeg har endnu ikke fundet et andet modalt script, der tilbyder et sådant æstetisk behageligt design. Det kommer ud af porten med a smukt brugergrænseflade, der kan smelte ind i stort set enhver hjemmeside. Du kan dog Restyler også designet der passer til dine behov.

Bare bemærk dette plugin kører på jQuery, så det er et af de få her der har en afhængighed. Men hvis du vil have de iziModal stilarter, er det en lille pris at betale for sådanne slanke popover-vinduer.

8. jQuery Modal

Det jQuery Modal plugin er måske den enkleste modal script på jQuery du nogensinde vil finde.

Det kan programmeres til binde automatisk med bestemte HTML-elementer baseret på forskellige attributter. Det også understøtter tastaturgenveje som f.eks. ESC for at lukke vinduet.

I alt dette plugin måler mindre end 1KB og det fungerer i enhver mulig browser, du kan forestille dig. jQuery-udviklere bør holde denne plugin gemt for hurtig adgang til et simpelt modal script uden ekstra dikkedarer.

9. PicoModal

Kom tilbage mod vanilla JavaScript, vi har PicoModal bibliotek. Dette er nok et af de mindste scripts, du finder, og det er designet til Kør perfekt på en vanille JavaScript-rygrad.

Det understøtter alle moderne browsere, herunder mobilbrowsere til Android og Mobile Safari til iOS. Det understøtter endda ældre IE browsere, der går tilbage til IE7!

PicoModals udvikler oprettet et lille JSfiddle script at demonstrere, hvordan det virker. Dette er et meget lille eksempel, og det er ikke bundet til et klikhændelse eller noget andet, men det er ikke svært at script i et par skift knapper at køre dette modal vindue korrekt.

10. Avgrund

Avgrund er nok en af ​​de mest unikke modeller i denne liste. Det bruger en brugerdefineret sidefading effekt sammen med en krympende animation for at bringe modalet rigtigt til syne.

Ikke alle vil sætte pris på denne animation, så jeg kan ikke sige, at dette script ville passe til alle hjemmesider. Men det er en ren vanille modal og det er super nemt at konfigurere, med blot en CSS og en JavaScript file.

Tag et kig på demo side for at se, hvordan det kører. Det har bestemt en unik stil og er bundet til at gribe opmærksomhed med de brugerdefinerede animationer, der bare virker.

Afsluttende ord

Uanset hvad du leder efter, vil jeg vædde på, at der er noget i denne liste, der passer til dine behov. Men hvis du stadig ikke er tilfreds Gennemse GitHub for relaterede modale scripts og se hvad du ellers kan finde.