带炫酷CSS3过渡动画的jQuery模态窗口插件

这是一款带19种炫酷CSS3过渡动画的jQuery模态窗口插件。该插件基于Codrops的ModalWindowEffects来制作，通过jQuery插件的方式来统一管理各种打开模态窗口的效果。

安装

可以通过bower来安装该模态窗口插件。

bower install foxythemes-niftymodals             
                

使用方法

在页面中引入jquery.niftymodals.css和jquery、jquery.niftymodals.js文件。

<link rel="stylesheet" href="dist/css/jquery.niftymodals.css">
<script src="path/to/jquery.min.js"></script>                  
<script src="dist/js/jquery.niftymodals.js"></script>                  
                

HTML结构

模态窗口的基本HTML结构如下：

<div class="md-dialog md-effect-1 md-show" id="your-modal-id">
    <div class="md-content">
        <!-- your content -->
    </div>
</div>
<div class="md-overlay"></div>     
                

初始化插件

在页面DOM元素加载完毕之后，可以通过在按钮或超链接上绑定niftyModal()方法来打开模态窗口。

$('#button-id').on('click',function(){
  $('#modal-id').niftyModal();
});                 
                

配置参数

在对模态窗口初始化时，可以以对象的方式传入一些配置参数：

$('#modal-id').niftyModal({
    overlaySelector: '.md-overlay',//模态窗口遮罩层的class类
    closeSelector: '.md-close',//模态窗口关闭按钮元素的class类
    classAddAfterOpen: 'md-show',//Body control class
    //This object will be available in the modal events
    data: {
      some_data: ''
    },
    //This option allow to attach a callback to a button with the class 'md-close'
    buttons: [
      {
        class: 'btn-ok',
        callback: function ( btn, modal, event ) {
          //You can cancel the modal hide event by returning false
          alert("You need to check your info!");
          return false;
        }
      },
      {
        class: 'btn-cancel',
        callback: function ( btn, modal, event ) {
          //You can access to the mocal data here
          var modal_data = modal.data.some_data;
        }
      }
    ],
    beforeOpen: function( modal ){
      //You can cancel the modal show event by returning false
    },
    afterOpen: function( modal ){
      //Executed after show event
    },
    beforeClose: function( modal ){
      //You can cancel the hide event by returning false
    },
    afterClose: function( modal ){
      //Executed after hide event
    }
});                  
                

或者你可以通过下面的方法来设置默认的配置参数：

$.fn.niftyModal('setDefaults',{
    overlaySelector: '.modal-overlay',
    closeSelector: '.modal-close',
    classAddAfterOpen: 'modal-show',
});                  
                

与Bootstrap结合使用

该插件可以和Bootstrap结合使用，你只需要引入jquery.niftymodals.bootstrap.css文件。

<link rel="stylesheet" type="text/css" href="[your path]/dist/jquery.niftymodals.bootstrap.css">                  
                

这个css样式表包含了对原生Bootstrap模态窗口组件的一些重写样式，例如：modal-header、modal-content和modal-footer等。

jquery-niftymodals模态窗口插件的github地址为：https://github.com/foxythemes/jquery-niftymodals。