Lightbox/弹窗
炫酷全屏模态窗口jQuery插件
PetitQ
收藏
这是一款 jQuery 炫酷全屏模态窗口插件。该插件通过和 animate.css 结合使用，可以制作多种打开全屏模态窗口的炫酷过渡动画效果。
使用方法
在页面中引入 animate.min.css、jquery 和 animatedModal.js 文件。
也想出现在这里？联系我们吧
<link href="css/animate.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/animatedModal.js"></script>
HTML 结构
通过下面的 HTML 结构来创建一个模态窗口。
<div id="animatedModal">
<!--注意！要关闭模态窗口，关闭按钮的class必须和给定的id匹配-->
<div id="btn-close-modal" class="close-animatedModal">
关闭模态框
</div>
<div class="modal-content">
<!--这里放置模态窗口的内容-->
</div>
</div>
然后添加一个用于触发模态窗口的按钮。
<a id="demo01" href="#animatedModal">demo1</a>
初始化插件
在页面 DOM 元素加载完毕之后，通过下面的方法来初始化该全屏模态窗口插件。
$("#demo01").animatedModal();
配置参数
该 jQuery 全屏模态窗口插件的可用配置参数如下：
| 参数 | 默认值 | 选项 | 描述 |
| color | #39BEB9 | HEX, HSL, RGB, RBA | 模态窗口的背景颜色 |
| animatedIn | zoomIn | 可以在 这里 选择 | 打开模态窗口时的过渡动画 |
| animatedOut | zoomOut | 可以在 这里 选择 | 关闭模态窗口时的过渡动画 |
| animationDuration | .6s | seconds | 过渡动画的持续时间 |
| overflow | auto | scroll; hidden; auto; | 当内容溢出时，模态窗口是否可以滚动 |
回调函数
该 jQuery 全屏模态窗口插件的可用回调函数如下：
$("#demo01").animatedModal({
animatedIn:'lightSpeedIn',
animatedOut:'bounceOutDown',
color:'#3498db',
// 回调函数beforeOpen: function() {
console.log("The animation was called");
},
afterOpen: function() {
console.log("The animation is completed");
},
beforeClose: function() {
console.log("The animation was called");
},
afterClose: function() {
console.log("The animation is completed");
}});
Github 地址为：https://github.com/joaopereirawd/animatedModal.js
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
