对话框/Tips
动画过渡效果jQuery窗口插件
PetitQ
jquery.modalBox 是一款效果非常炫酷的带 CSS3 动画过渡效果的 jQuery 模态窗口插件。该模态窗口使用 Animate.css 来制作 CSS3 动画过渡效果。它使用简单，文件体积小，而且动画效果非常的流畅。
使用方法:
使用该模态窗口插件需要引入 Animate.css 和 jquery.modalBox.css 文件，一级 jQuery 和 jquery.modalbox.js 文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.modalBox.css" />
<script src="js/jquery-min.js"></script>
<script src="js/jquery.modalbox.js"></script>
HTML 结构:
该模态窗口的 HTML 结构分为两个部分：模态窗口和触发按钮。模态窗口的 HTML 结构如下：
<div class="modal-box" id="modal-content">
<div class="inner">
<button class="close">×</button>
<a href="#">Modal</a>
</div>
</div>
然后可以通过一个[a]元素来触发这个模态窗口，需要在 href 属性中指向上面的模态窗口的 ID。
<a href="#modal-content" class="modal-box">触发模态窗口</a>
调用插件：
可以通过下面的方法来在点击链接时打开模态窗口。
$('a.modal-box').click(function(e){
e.preventDefault();
$( $(this).attr("href") ).modalBox("open");
});
配置参数:
| 参数 | 类型 | 默认值 | 描述 |
| openAnimationDuration | number | 500 | 设置打开模态窗口时动画的持续时间 |
| closeAnimationDuration | number | 500 | 设置关闭模态窗口时动画的持续时间 |
| openAnimationEffect | string | default-in | 设置打开模态窗口的动画效果 |
| closeAnimationEffect | string | default-out | 设置关闭模态窗口的动画效果 |
| closeOnEscape | boolean | true | 是否允许用户使用 Esc 键关闭模态窗口 |
| autoClose | boolean | false | 是否自动关闭模态窗口 |
| autoCloseDelay | number | 3000 | 多少时间之后自动关闭模态窗口 |
事件:
$('.modal').on('modalBox:___EVENT_NAME___', function(){
});
| 事件 | 描述 |
| beforeOpen | 模态窗口打开前触发 |
| afterOpen | 模态窗口打开后触发 |
| beforeClose | 模态窗口关闭前触发 |
| afterClose | 模态窗口关闭后触发 |
方法:
| 参数 | 描述 |
| open | 打开模态窗口 |
| close | 关闭模态窗口 |
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
