iziModal一款基于jQuery的优雅、快速、灵活的弹窗插件

iziModal一款基于jQuery的优雅、快速、灵活的弹窗插件
iziModal是一款基于jQuery的弹窗模态插件,具有优雅、响应快速、灵活轻便的特性,很是炫酷。该模态弹窗插件不仅支持动画特效,而且还支持多种调用方式,如:支持iframe调用,Ajax异步加载,制作alert效果,支持大内容加载等。

入门指南

使用方法

在网页中引入jQuery和iziModal对应的JS和CSS文件。

<link rel="stylesheet" href="css/iziModal.min.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/iziModal.min.js" type="text/javascript"></script>

HTML代码(部分)

假设我们使用<a>标签打开模态弹窗。

<!-- a标签添加trigger样式,方便后边获取句柄 -->
<a href="#" class="trigger">打开模态窗口</a>
<!-- 这里模态窗口 -->
<div id="modal">
    <!-- 模态窗口的内容 -->
</div>

JavaScript脚本初始化

方式一:在DOM元素加载完毕之后,直接通过iziModal()方法来初始化模态窗口。

$("#modal").iziModal();

方式二:使用jQuery事件来打开模态窗口。

$(document).on('click', '.trigger', function (event) {
    event.preventDefault();
    $('#modal').iziModal('open', this); //注意这里的this对象
});

更多使用方法请参考官方文档:https://izimodal.marcelodolza.com/#documentation

the end