带炫酷CSS3过渡动画的jQuery模态窗口插件-特效详细页-国内领先的前端外包切图网站-切客网(qkhtml.com)

在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

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

分类:弹出层 更新时间:2016-07-29 浏览次数:2009

代码简介

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

浏览器兼容

兼容:Chrome,Opera,Firefox,Safari,IE10+

使用方法

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

$('#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!");
          returnfalse;
        }
      },
      {
        class:'btn-cancel',
        callback:function( btn, modal, event ) {
          //You can access to the mocal data here
          varmodal_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文件。

  

问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!