jquery.modalBox是一款效果非常炫酷的带CSS3动画过渡效果的jQuery模态窗口插件。该模态窗口使用Animate.css来制作CSS3动画过渡效果。它使用简单,文件体积小,而且动画效果非常的流畅。

使用方法

使用该模态窗口插件需要引入Animate.css和jquery.modalBox.css文件,一级jQuery和jquery.modalbox.js文件。

<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.modalBox.css" />
<script src="js/jquery-min.js"></script>
<script src="js/jquery.modalbox.js"></script>                
              
HTML结构

该模态窗口的HTML结构分为两个部分:模态窗口和触发按钮。模态窗口的HTML结构如下:

<div class="modal-box" id="modal-content">
  <div class="inner">
      <button class="close">×</button>
      <a href="#">Modal</a>
  </div>
</div>              
              

然后可以通过一个<a>元素来触发这个模态窗口,需要在href属性中指向上面的模态窗口的ID。

<a href="#modal-content" class="modal-box">触发模态窗口</a>                
              
调用插件

可以通过下面的方法来在点击链接时打开模态窗口。

$('a.modal-box').click(function(e){
    e.preventDefault();
    $( $(this).attr("href") ).modalBox("open");
});               
              

配置参数

通用配置参数

下面的参数适用于所有的幻灯片布局。其它每个布局的独有配置参数在后面列出。

参数 类型 默认值 描述
openAnimationDuration number 500 设置打开模态窗口时动画的持续时间
closeAnimationDuration number 500 设置关闭模态窗口时动画的持续时间
openAnimationEffect string default-in 设置打开模态窗口的动画效果
closeAnimationEffect string default-out 设置关闭模态窗口的动画效果
closeOnEscape boolean true 是否允许用户使用Esc键关闭模态窗口
autoClose boolean false 是否自动关闭模态窗口
autoCloseDelay number 3000 多少时间之后自动关闭模态窗口

事件

$('.modal').on('modalBox:___EVENT_NAME___', function(){
 
});                
              
事件 描述
beforeOpen 模态窗口打开前触发
afterOpen 模态窗口打开后触发
beforeClose 模态窗口关闭前触发
afterClose 模态窗口关闭后触发

方法

var api = $('#modal').data("modalBox");                
              
参数 描述
open 打开模态窗口
close 关闭模态窗口