iziModal.js - Een jQuery-invoegtoepassing voor een echt dynamisch modaal venster

De meeste modale vensters lijken afleiden en de bezoeker irriteren met opt-in velden en ongewenste deals. Deze modals nemen vaak de hele pagina over, zien er vreselijk uit en bieden geen duidelijke manier om het venster te sluiten. dankbaar, iziModal.js is precies het tegenovergestelde.

Het is een van de slankste modale vensterplug-ins die ik ooit heb gezien en het maakt me enthousiast om opnieuw met modals te werken.

iziModal.js is een jQuery-plug-in dus je hebt het nodig een kopie van de jQuery-bibliotheek om dit te laten werken. Maar het is vrij lichtgewicht en je kunt zelfs de bibliotheek extern opnemen van CDNJS.

Let op deze plug-in wordt geleverd met veel van verschillende opties. U kunt opties doorgeven aan style de modale grootte, frametype en animatie. Maar je kunt ook callback-functies maken als de gebruiker een modaal sluit of op een specifiek element klikt.

Je kunt vinden genoeg voorbeelden op CodePen, maar ik vind het echt leuk demo's gehost op de startpagina van iziModal. Bekijk in het bijzonder de iframe embed optie waar het heeft een autoplay Vimeo-speler wachtrij in het modale.

Het ontwerp is prachtig en de modal voelt echt alsof het is deel van de interface. De kwaliteit van de animatie is ook indrukwekkend, en het is allemaal mogelijk CSS3 en jQuery.

Op de hoofdplugin-pagina vindt u ook documentatie tabellen met codefragmenten voor elk van de beschikbare demo's. hier is het kortste stukje code te gebruiken voor een pop-up met een modaal venster.

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

De iziModal () functie heeft meer dan 45 verschillende opties dat kan worden doorgegeven aan pas het modale venster aan. Het heeft ook aangepaste evenementen dat kan trigger-functies zoals wanneer een modaal wordt geopend, gesloten of op volledig scherm wordt weergegeven.

Dit is een ongelofelijk enorm project en het is gemakkelijk een van mijn favoriete modale vensterplug-ins van een ontwerp en gebruiksvriendelijkheid.

Om een ​​kopie van de bron te bemachtigen, kunt u dat ook doen trek het door npm of downloaden van GitHub. En als u suggesties hebt over de plug-in of als u alleen maar wilt bedanken, kunt u de maker Marcelo Dolce @marcelodolce tweeten.