带CSS3动画过渡效果的jQuery模态窗口插件

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");
});               
              

配置参数

通用配置参数

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

事件

$('.modal').on('modalBox:___EVENT_NAME___', function(){
 
});                
              

方法

var api = $('#modal').data("modalBox");