iziModal.js - Todella dynaaminen modaali -ikkuna jQuery Plugin

Useimmat modaaliset ikkunat näyttävät olevan häiritse ja ärsyttää kävijää kanssa opt-in -kentät ja ei-toivottuja tarjouksia. Nämä modaalit siirtyvät usein koko sivulle, näyttävät kauhistuttavilta ja eivät tarjoa selkeää tapaa sulkea ikkunaa. Onneksi, iziModal.js on aivan päinvastainen.

Se on yksi näennäisimmistä modaaliikkunan laajennuksista, joita olen koskaan nähnyt, ja se saa minut innostumaan vuorovaikutuksessa modaalien kanssa.

iziModal.js on a jQuery-laajennus niin sinun tarvitsee kopio jQuery-kirjastosta jotta tämä toimisi. Mutta se on aika kevyt ja voit jopa sisällyttää kirjasto ulkoisesti CDNJS: ltä.

Huomaa, että tämä laajennus tulee paljon eri vaihtoehtoja. Voit siirtää vaihtoehtoja tyyli modaalikoko, kehystyyppi ja animaatio. Mutta voit myös luoda soittopyyntötoimintoja jos käyttäjä sulkee modaalin tai napsauttaa tiettyä elementtiä.

Voit löytää paljon esimerkkejä CodePenissä, mutta pidän todella siitä demot isiModalin kotisivulla. Tarkasta erityisesti iframe upottaa vaihtoehdon missä se on autoplay Vimeo-soitin jonossa.

Suunnittelu on upea ja modaali todella tuntuu osa rajapintaa. Animaation laatu on myös vaikuttava, ja siinä on kaikki virta CSS3 & jQuery.

Löydät myös tärkeimmistä plugin-sivuista dokumentointitaulukot, joissa on koodinpätkät jokaisesta käytettävissä olevasta demosta. tässä lyhin koodi käyttää modaalisen ikkunan ponnahdusikkunassa.

 $ (asiakirja) .on ('napsauta', '.trigger', toiminto (tapahtuma) event.preventDefault (); $ ('# modal'). iziModal ('open');); 

iziModal () toiminto on yli 45 eri vaihtoehtoa joka voidaan siirtää muokkaa modaalilistaa. Siinä on myös mukautettuja tapahtumia se voi laukaista toiminnot kuten silloin, kun modaali avautuu, sulkeutuu tai menee täyteen näyttöön.

Tämä on uskomattoman massiivinen projekti, ja se on helposti yksi suosikkini modaalisen ikkunan laajennuksista suunnittelun ja käytettävyyden näkökulmasta.

Voit myös kopioida lähdekoodin vedä se npm: n läpi tai ladata GitHubista. Ja jos sinulla on ehdotuksia pluginista tai haluat vain jakaa kiitoksesi, voit piirtää luoja Marcelo Dolce @marcelodolce.