对话框/Tips
jQuery+CSS3全屏带过渡动画弹窗
PetitQ
animatedModal.js 是一款效果非常炫酷的 jQuery 和 CSS3 全屏带过渡动画的模态窗口特效插件。该模态窗口插件和 animate.css 完美结合，你可以使用 animate.css 中的任何动画效果来制作该模态窗口的过渡动画效果。
使用方法：
要使用该模态窗口插件，首先在 HTML 页面的
中引入 animate.css 文件，在标签之前引入 jquery 和 animatedModal.js 文件。也想出现在这里？联系我们吧
<link rel="stylesheet" href="css/animate.css">
<script src=js/jquery.min.js"></script>
<script src="js/animatedModal.js"></script>
HTML 结构：
该模态窗口的基本的 HTML 结构如下：
<!--触发模态窗口的按钮-->
<a id="demo01" href="#animatedModal">DEMO01</a>
<!--模态窗口-->
<div id="animatedModal">
<!--关闭模态窗口的按钮，一定要写。class名称的格式是：<code>close</code>+模态窗口的ID-->
<div id="btn-close-modal" class="close-animatedModal">
CLOSE MODAL
</div>
<div class="modal-content">
<!--Your modal content goes here-->
</div>
</div>
用于触发模态窗口的超链接的 href 要指向该模态窗口的 ID，在模态窗口中，要给定一个关闭按钮，否则该模态窗口不能关闭。关闭按钮的样式可以自定义。另外，关闭按钮的 class 的写法是固定的：close-，后面接要关闭的模态窗口的 ID。
基本调用：
完成上面的步骤后，可以用下面的方法来调用该模态窗口插件。
$(function(){
$("#demo01").animatedModal();
});
可用参数：
| modalTarget | animatedModal | 指定模态窗口 | |
| color | #39BEB9 | HEX, HSL, RGB, RBA | 定义模态窗口的背景色 |
| animatedIn | zoomIn | Choose Here | 模态窗口打开时的动画效果 |
| animatedOut | zoomOut | Choose Here | 关闭模态窗口时的动画效果 |
| animationDuration | .6s | seconds | 模态窗口动画的持续时间 |
| overflow | auto | scroll; hidden; auto; | 是否允许模态窗口滚动 |
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
