jQuery炫酷全屏模态窗口插件

jQuery炫酷全屏模态窗口插件

这是一款jQuery炫酷全屏模态窗口插件。该插件通过和animate.css结合使用,可以制作多种打开全屏模态窗口的炫酷过渡动画效果。

使用方法
在页面中引入animate.min.css、jquery和animatedModal.js文件。

1
2
3
<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结构来创建一个模态窗口。

1
2
3
4
5
6
7
8
9
10
<div id="animatedModal">
  <!--注意!要关闭模态窗口,关闭按钮的class必须和给定的id匹配-->
  <div  id="btn-close-modal" class="close-animatedModal">
    关闭模态框
  </div>
       
  <div class="modal-content">
    <!--这里放置模态窗口的内容-->
  </div>
</div>

然后添加一个用于触发模态窗口的按钮。

1
<a id="demo01" href="#animatedModal">demo1</a>

初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化该全屏模态窗口插件。

1
$("#demo01").animatedModal();

回调函数
该jQuery全屏模态窗口插件的可用回调函数如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$("#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");
    }
});
当前内容只有登录了才能查看,如果您已经注册,请登录
3

发表评论