jQuery和CSS3全屏带过渡动画效果的模态窗口

当前位置:主页 > jQuery库 > Lightbox和对话框 > jQuery和CSS3全屏带过渡动画效果的模态窗口
jQuery和CSS3全屏带过渡动画效果的模态窗口
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-03-03
    阅读:
简要教程

animatedModal.js是一款效果非常炫酷的 jQueryCSS3 全屏带过渡动画的模态窗口特效插件。该模态窗口插件和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; 是否允许模态窗口滚动