在网页中引入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>
假设我们使用<a>
标签打开模态弹窗。
<!-- a标签添加trigger样式,方便后边获取句柄 -->
<a href="#" class="trigger">打开模态窗口</a>
<!-- 这里模态窗口 -->
<div id="modal">
<!-- 模态窗口的内容 -->
</div>
方式一:在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