iziModal.js - Una finestra modale veramente dinamica jQuery Plugin

Sembra che la maggior parte delle finestre modali distrarre e infastidire il visitatore con campi opt-in e offerte indesiderate. Questi modals occupano spesso l'intera pagina, sembrano terribili e non offrono un modo chiaro per chiudere la finestra. Per fortuna, iziModal.js è l'esatto opposto.

È uno dei plugin di finestra modali più eleganti che abbia mai visto e mi eccita di nuovo l'interazione con le modali.

iziModal.js è un plugin jQuery quindi hai bisogno una copia della libreria jQuery per questo funziona. Ma è abbastanza leggero e puoi anche includere la libreria esternamente da CDNJS.

Nota questo plugin viene fornito con Un sacco di diverse opzioni. Puoi passare in opzioni a stile le dimensioni modali, il tipo di frame e l'animazione. Ma puoi anche creare funzioni di callback se l'utente chiude una modal o fa clic su un elemento specifico.

Potete trovare molti esempi su CodePen ma mi piace molto il demo ospitate sulla home page di iziModal. In particolare, controlla il iframe embed option dove è un giocatore Vimeo autoplay accodato nel modale.

Il design è magnifico e il modale sembra davvero parte dell'interfaccia. Anche la qualità dell'animazione è impressionante, ed è tutto alimentato con CSS3 e jQuery.

Nella pagina principale del plugin, troverai anche tabelle di documentazione con frammenti di codice per ciascuna delle demo disponibili. Ecco il più breve di codice da usare per un popup di finestra modale.

 $ (document) .on ('click', '.trigger', function (event) event.preventDefault (); $ ('# modal'). iziModal ('open');); 

Il iziModal () la funzione ha oltre 45 diverse opzioni che può essere passato a personalizzare la finestra modale. Ha anche eventi personalizzati che può funzioni di innesco come quando una modale si apre, si chiude o va a schermo intero.

Questo è un progetto incredibilmente massiccio ed è facilmente uno dei miei plugin di finestra modale preferiti da a punto di vista del design e dell'usabilità.

Puoi prendere una copia della fonte, puoi tiralo attraverso npm o scarica da GitHub. E se hai suggerimenti sul plugin o vuoi solo condividere i tuoi ringraziamenti puoi twittare il creatore Marcelo Dolce @marcelodolce.