jQuery炫酷全屏模态窗口插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款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");
    }
});

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