iziModal.js - Skutečně dynamické modální okno jQuery Plugin

Většina modálních oken vypadá odvrátit pozornost návštěvníka s opt-in pole a nechtěné nabídky. Tyto modály často přebírají celou stránku, vypadají hrozně a nenabízejí jasný způsob zavření okna. díkybohu, iziModal.js je přesný opak.

Je to jeden z nejkrásnějších plug-inů pro modální okna, jaké jsem kdy viděl, a to mě vzrušuje, když mohu opět komunikovat s modály.

iziModal.js je jQuery plugin takže to potřebujete kopii knihovny jQuery aby to fungovalo. Ale je to velmi lehká a můžete dokonce zahrnout knihovnu externě z CDNJS.

Poznámka: tento plugin je dodáván s mnoho různých možností. Můžete předat možnosti stylu modální velikosti, typu rámce a animace. Ale můžete také vytvořit funkce zpětného volání pokud uživatel zavře modální nebo kliknutí na konkrétní prvek.

Můžeš najít mnoho příkladů na CodePen, ale opravdu se mi líbí dema hostovaná na domovské stránce iziModal. Konkrétně, podívejte se na volba iframe embed kde má autoplay Vimeo hráč zařazeny do fronty.

Design je nádherný a modální opravdu cítí, že je to součástí rozhraní. Kvalita animace je také impozantní a vše je poháněno CSS3 & jQuery.

Na hlavní stránce pluginu najdete také tabulky dokumentace s útržky kódu pro každou z dostupných ukázek. Tady je nejkratší bit kódu použít pro vyskakovací okno modálního okna.

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

iziModal () funkce více než 45 různých možností které mohou být předány přizpůsobit modální okno. Má také vlastní události to může spouštěcí funkce jako když se modal otevře, zavře nebo přejde na celou obrazovku.

Jedná se o neuvěřitelně masivní projekt a je to jednoduše jeden z mých nejoblíbenějších pluginů pro modální okna od společnosti design a použitelnost.

Chcete-li chytit kopii zdroje, můžete buď vytáhněte ji přes npm nebo ke stažení z GitHub. A pokud máte návrhy týkající se pluginu nebo se jen chcete podělit o své díky, můžete tweetovat autora Marcelo Dolce @marcelodolce.