Hjemmeside » Webdesign » iziModal.js - En virkelig dynamisk Modal Window jQuery Plugin

    iziModal.js - En virkelig dynamisk Modal Window jQuery Plugin

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

    Det er en 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 så du trenger en kopi av jQuery-biblioteket for dette å fungere. Men det er ganske lett og du kan til og med Inkluder biblioteket eksternt fra CDNJS.

    Merk at dette pluginet kommer med mye av forskjellige alternativer. Du kan passere i alternativer til stil den modale størrelsen, rammetypen og animasjonen. 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 vert på iziModals hjemmeside. Se nærmere på iframe legge inn alternativet hvor den har en autoplay Vimeo-spiller kjøre opp i modal.

    Designet er fantastisk, og modal føles virkelig som det er 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 å bruke til et modalt vindu popup.

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

    De iziModal () funksjonen har over 45 forskjellige alternativer som kan sendes inn i tilpasse det modale vinduet. Den har også tilpassede arrangementer det kan utløserfunksjoner som når en modal åpnes, lukkes eller går full skjerm.

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

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