这是一款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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!