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

这是我见过的最时尚的模态窗口插件之一，它让我很高兴再次与模态交互。

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

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

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

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

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

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

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

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

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

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