animatedModal.js是一款效果非常炫酷的 jQuery 和 CSS3 全屏带过渡动画的模态窗口特效插件。该模态窗口插件和animate.css完美结合，你可以使用animate.css中的任何动画效果来制作该模态窗口的过渡动画效果。

使用方法

要使用该模态窗口插件，首先在HTML页面的<head>中引入animate.css文件，在<body>标签之前引入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; 是否允许模态窗口滚动