这是一款带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。
