大多数模式窗口似乎都因选择加入字段不必要的交易分散了访问者的注意力并使其烦恼 这些模式通常占据整个页面,看起来很糟糕,并且没有提供关闭窗口的清晰方法。 值得庆幸的是, iziModal.js正好相反。

这是我见过的最时尚的模态窗口插件之一,再次与模态交互使我兴奋。

iziModal.js –真正的动态模态窗口jQuery插件

iziModal.js是一个jQuery插件,因此您确实需要一个jQuery库的副本才能正常工作。 但是它非常轻巧 ,您甚至可以 从CDNJS 外部包含该库

请注意,此插件附带许多不同的选项 您可以传入选项以设置模式尺寸,框架类型和动画的样式 但是,如果用户关闭模式或单击特定元素,您也可以创建回调函数

您可以在CodePen上找到很多示例 但我真的很喜欢iziModal主页上托管演示 具体来说,请检查iframe嵌入选项 ,该选项中有一个自动播放的Vimeo播放器在模式中排队。

iziModal.js –真正的动态模态窗口jQuery插件

设计宏伟,模态确实感觉像是界面一部分 动画的质量也令人印象深刻,并且全部由CSS3和jQuery提供支持

在主插件页面上,您还将找到带有每个可用演示的代码段的文档表 这是用于模式窗口弹出的最短代码

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

iziModal()函数具有超过45个不同的选项 ,可以传递这些选项来自定义模态窗口 它还具有可触发功能的 自定义事件 ,例如模式打开,关闭或进入全屏时。

设计和可用性的角度来看,这是一个令人难以置信的庞大项目,并且很容易成为我最喜欢的模式窗口插件之一。

要获取源代码的副本,您可以将其拉过npm从GitHub下载

翻译自: https://www.hongkiat.com/blog/izimodal-js/

相关文章: