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

PetitQ 对话框/Tips 2018-10-26 2K 0 0

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

使用方法:

在页面中引入 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">
```
```
        
```
```
    </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