10 Gratis JavaScript Modal Window Plugins

Du kan finne masse rene CSS-modeller men disse Ikke gi samme kontroll som JavaScript. Med en JavaScript-modal kan du legge til tilpassede animasjoner, grensesnittinnganger og virkelig forbedre brukeropplevelsen.

Men hvorfor design noe fra grunnen når Du kan bruke et JS-bibliotek? Jeg har samlet beste gratis JavaScript-drevne modale skript her for deg å lese og enkelt ut dine favoritter.

Alle disse er helt gratis og åpen kildekode, slik at du kan redigere koden og sette dem på nytt for å passe til nettstedet ditt etter behov.

1. Tingle

En av mine favoritt gratis modale skript er Tingle.js. Det er bygget på vanilje JavaScript uten avhengigheter, slik at du ikke trenger noen jQuery- eller Zepto-biblioteker.

I tillegg er det et ganske lite bibliotek, selv om det har mange alternativer for tilpasning. Du kan endre CSS-overgangene, JavaScript-modal animasjonene og hele brukeropplevelsen med bare noen få innstillinger.

Tingle.js er designet for å være fullt tilgjengelig og lydhør, så det fungerer på mobile enheter og støtter også eldre nettlesere.

Du kan se all dokumentasjon på GitHub, sammen med gratis kildekoden. De har også en demo link, så du kan sjekk ut Tingle i aksjon for å se om det kunne passe på nettstedet ditt.

2. Vanilje Modal

Her er en modal jeg nettopp har funnet nylig, og det er mye enklere enn de fleste. Vanilje Modal står tro mot navnet med a rent vanilje skript drev modal, sammen med CSS overganger.

Denne tingen er ganske liten og super fleksibel, med tilpasset CSS for å restylle vinduene. Den har også ganske mange alternativer du kan endre med JavaScript, gjør den perfekt til å kjøre DOM-funksjoner eller til og med tilbakeringingsfunksjoner.

Ta en titt på demo side for å se standard stilen. Det er en veldig grunnleggende design, så det blir det krever tilpassinger for å bruke det på et produksjonssted. Men dette kutter også ned på de totale kodekravene, så det er et av de smaleste JavaScript-modalbiblioteker.

3. plainModal

Hvis du vil ha et veldig enkelt skript, anbefaler jeg det plainModal. Det er bygget på jQuery, men det er en av de minste modalskriptene som er tilgjengelige.

Det gjør det ikke bruk noen eksterne CSS- eller bildefiler. Bare ett enkelt JS-skript er alt du trenger.

Når plainModal-skriptet er lagt til på siden din, bare du mål modal knappen og du er god til å gå. Dette gir deg kontroll over displayet og hvor mye du vil endre det modale grensesnittet.

I tillegg kan du sett opp modalet med en linje med JavaScript holder med det minimalistiske temaet for denne plugin.

4. Modaal

Det er ingen benektelse tilgjengeligheten er stor på nettet. Hver designers mål skal være en mer inkluderende opplevelse for mennesker rundt om i verden på ulike enheter og med mulige begrensninger.

Med Modaal, du får den perfekte opplevelsen som passerer WCAG 2.0-testen med en solid AA-tilgjengelighetsgrad. Du kan se et fantastisk eksempel på hovedsiden, sammen med noen kodedokumentasjon.

Samlet anbefaler jeg denne vanilla JavaScript plugin for alle som virkelig bryr seg om tilgjengelighet. AA-vurderingen kan kreves på enkelte webprosjekter, så Modaal er et veldig praktisk skript for å holde bokmerket.

5. Scotch JS Modal

Utviklingslaget på Scotch.io publiserer veiledninger og veiledninger for kodere. Deres arbeid er utrolig og det viser seg virkelig Dette JavaScript-modalskriptet, hostet på Scotch GitHub.

Modalet ble utviklet av Ken Wheeler og dette skriptet selv har en full opplæring hvis du vil lære hvordan det fungerer. Men gratis koden skal være nok for de fleste utviklere siden dette er super lett og lett å sette opp. Ingen avhengigheter, og til og med en prøve demo på CodePen.

6. Bootbox.js

Den raskeste måten å lansere et nytt webprosjekt er gjennom Bootstrap. Det er en kraftig frontend rammeverk som oppfordrer utviklere til lag egne tillegg til biblioteket.

Et slikt eksempel er Bootbox.js, et lite JavaScript-bibliotek, Utformet kun for modale vinduer i Bootstrap. Det faktisk fungerer på dialogbokser hvor brukeren kan klikke på OK eller avbryte, basert på forespørselen din.

Typiske JavaScript-dialoger er forferdelige, akkurat som advarselsbokser. Bootbox-skriptet tilbyr a solid alternativ for alle som jobber i BS3 / BS4 økosystemet.

Igjen er det helt gratis og åpen kildekode, sammen med a lang dokumentasjonsside å få deg opp og løpe fort.

7. iziModal.js

Hvis du trenger en løsning litt mer tilpasset Sjekk ut iziModal.js. Dette verktøyet er fullt responsiv og designet til jobbe perfekt i alle moderne nettlesere.

Jeg har ennå ikke funnet et annet modalt skript som tilbyr en slik estetisk tiltalende design. Det kommer ut porten med a nydelig brukergrensesnitt som kan blande seg i praktisk talt alle nettsteder. Men du kan Restyler også designet for å dekke dine behov.

Legg merke til dette pluginet kjører på jQuery, så det er en av de få her det har en avhengighet. Men hvis du vil ha iziModal-stilene, er det en liten pris å betale for slike slanke popover-vinduer.

8. jQuery Modal

De jQuery Modal plugin er kanskje den enkleste modal script på jQuery du noensinne vil finne.

Det kan programmeres til bind automatisk med visse HTML-elementer basert på ulike attributter. Det også støtter tastatursnarveier slik som ESC for å lukke vinduet.

Totalt, dette pluginet måler mindre enn 1 kg og det Fungerer i alle mulige nettlesere du kan forestille deg. jQuery-utviklere bør holde denne plugin lagret for rask tilgang til et enkelt modal script uten ekstra frills.

9. PicoModal

Kommer tilbake mot vanilla JavaScript, har vi PicoModal bibliotek. Dette er sannsynligvis et av de minste skriftene du finner og det er laget for Kjør perfekt på en vanilje JavaScript-ryggrad.

Den støtter alle moderne nettlesere, inkludert mobile nettlesere for Android og Mobile Safari for iOS. Den støtter til og med eldre IE-nettlesere, som går tilbake til IE7!

PicoModals utvikler opprettet et lite JSfiddle-skript å demonstrere hvordan det fungerer. Dette er et veldig lite eksempel, og det er ikke knyttet til et klikkhendelse eller noe annet, men det er ikke vanskelig å Skript i noen få svingknapper å kjøre dette modalvinduet riktig.

10. Avgrund

Avgrund er sannsynligvis en av de mest unike modalene i denne listen. Den bruker en tilpasset sidefading effekt, sammen med en krympende animasjon å bringe modal rett inn i visningen.

Ikke alle vil sette pris på denne animasjonen, så jeg kan ikke si at dette skriptet passer alle nettsteder. Men det er en ren vanilje modal og det er veldig enkelt å sette opp, med bare et CSS og et JavaScript-file.

Ta en titt på demo side å se hvordan det går. Det har absolutt en unik stil og er bundet til å ta tak i oppmerksomheten med de egendefinerte animasjonene som bare fungerer.

Siste ord

Uansett hva du leter etter, vil jeg satse på at det er noe i denne listen som passer dine behov. Men hvis du fortsatt ikke er fornøyd bla gjennom GitHub for relaterte modale skript og se hva annet du kan finne.