jQuery炫酷全屏模态窗口插件

这是一款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全屏模态窗口插件的可用配置参数如下：

回调函数

该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");
    }
});
    

该jQuery全屏模态窗口插件的github地址为：https://github.com/joaopereirawd/animatedModal.js