iziModal.js - En virkelig dynamisk Modal Window jQuery Plugin

De fleste modale vinduer ser ut til å distrahere og irritere besøkende med innloggingsfelt og uønskede avtaler . Disse modalene tar ofte over hele siden, ser forferdelig ut, og gir ikke en klar måte å lukke vinduet på. Heldigvis er iziModal.js det motsatte.

Det er et av de fineste modale vindupluggene jeg noensinne har sett, og det blir meg glade for å samhandle med modaler igjen.

iziModal.js er en jQuery-plugin, slik at du trenger en kopi av jQuery-biblioteket for at dette skal fungere. Men det er ganske lett og du kan til og med inkludere biblioteket eksternt fra CDNJS.

Merk dette plugin kommer med mange forskjellige alternativer . Du kan passere i alternativer for å utforme modal størrelse, rammetype og animasjon . Men du kan også opprette tilbakeringingsfunksjoner hvis brukeren lukker en modal eller klikk på et bestemt element.

Du kan finne mange eksempler på CodePen, men jeg liker virkelig demoer som er vert på iziModals hjemmeside . Spesifikt, sjekk ut iframe-innlejringsalternativet der det har en autoplay-Vimeo-spiller i køen i modal.

Utformingen er fantastisk og modal føler virkelig at den er en del av grensesnittet . Kvaliteten på animasjonen er også imponerende, og den er alle drevet med CSS3 og jQuery .

På hovedinnstillingssiden finner du også dokumentasjonstabeller med kodestykker for hver av de tilgjengelige demoene. Her er den korteste koden som skal brukes til et modalt vindu popup.

 $ (dokument) .on ('klikk', '.trigger', funksjon (hendelse) {event.preventDefault (); $ ('# modal'). iziModal ('open');}); 

Funksjonen iziModal() har over 45 forskjellige alternativer som kan sendes inn for å tilpasse modalvinduet . Det har også tilpassede hendelser som kan utløse funksjoner som når en modal åpner, lukker eller går i fullskjerm.

Dette er et utrolig stort prosjekt, og det er lett et av mine favorittmodalvinduplugger fra et design- og brukervennlighet .

For å ta tak i en kopi av kilden, kan du enten trekke den gjennom npm eller laste ned fra GitHub . Og hvis du har forslag om pluginet eller bare vil dele takk, kan du tweet skaperen Marcelo Dolce @marcelodolce.