带多种CSS3过渡动画的jquery模态窗口插件

当前位置:主页 > jQuery库 > Lightbox和对话框 > 带多种CSS3过渡动画的jquery模态窗口插件
带多种CSS3过渡动画的jquery模态窗口插件
分享:

    插件介绍

    jquery.quick-modal.js是一款带多种CSS3过渡动画的jquery模态窗口插件。它的特点是使用简单,响应快速,并且内置了10种显示模态窗口的CSS3过渡动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:2017-08-29
    阅读:
简要教程

jquery.quick-modal.js是一款带多种CSS3过渡动画的jquery模态窗口插件。它的特点是使用简单,响应快速,并且内置了10种显示模态窗口的CSS3过渡动画效果。

使用方法

在页面中引入quick-modal.min.css和jquery以及jquery.quick-modal.js文件。

<link href="css/quick-modal.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.quick-modal.js"></script>
                
HTML结构

构建一个模态窗口所需的HTML代码如下:

<a href="#" class="open-modal" data-modal-id="my-modal">点击这里弹出模态窗口</a>
<div id="my-modal" class="qm-modal">
    <h1>标题</h1>
    <a href="#" class="qm-close-modal">关闭窗口</a>
</div>             
                

其中,open-modalclass用于触发模态窗口。data-modal-id用于指定模态窗口的ID,必须指定。qm-modal class用于指定模态窗口。qm-close-modal用于指定模态窗口的关闭按钮。

初始化插件

在页面DOM元素加载完毕之后,可以通过quickModal()方法来初始化该模态窗口插件。

$(document).ready(function() {
    $('.open-modal').quickModal();
});                  
                

配置参数

该模态窗口插件的可用配置参数如下:

$(document).ready(function() {
    $('.open-modal').quickModal({ // Default values below
        animation: 'fade-zoom',
        speed: 250,
        timing: 'ease',
        closeModalSelector: '.qm-close-modal'
        enableEsc: true,
        enableClickAway: true,
        enableBodyScroll: false,
        appendBackgroundTo: 'body',
        prefix: 'qm',
        onOpen: function() {},
        onClose: function() {}
    });
});                  
                
  • animation:打开和关闭模态窗口的动画类型,可用的动画类型有:'fade''fade-up''fade-right''fade-down''fade-left''fade-zoom''fade-zoom-up''fade-zoom-right''fade-zoom-down''fade-zoom-left'
  • speed:模态窗口过渡动画的时间。
  • timing:模态窗口过渡动画的timing函数。可用的timing函数有:'linear''ease''ease-in''ease-out''ease-in-out''cubic-bezier(n, n, n, n)'
  • closeModalSelector:关闭模态窗口的jquery选择器。
  • enableEsc:是否允许使用Esc键来关闭模态窗口。
  • enableClickAway:是否允许点击模态窗口之外的地方来关闭模态窗口。
  • enableBodyScroll:是否允许模态窗口的背景滚动。
  • appendBackgroundTo:模态窗口背景的jquery选择器。
  • prefix:添加一个空间前缀。
  • onOpen:模态窗口打开时的回调函数。
  • onClose:模态窗口关闭时的回调函数。

方法

可以使用下面的方法来手动触发模态窗口。

$(document).ready(function() {
    $('#my-modal').quickModal('open');
    
    $('#my-modal').quickModal('open', {
        animation: 'fade-zoom-down',
        speed: 500,
        timing: 'ease-in-out',
        closeModalSelector: '.close-button'
    });
    
    $('#my-modal').quickModal('close');
    
    $('#my-modal').quickModal('close', {
        animation: 'fade-left',
        speed: 750,
        timing: 'linear'
    });
    
    $('#modal-link').quickModal('trigger');
    
    $('#modal-link').quickModal('trigger', {
        animation: 'fade',
        timing: 'ease-out'
    });
});                  
                

事件

该模态窗口提供两个可用的事件。

$(document).ready(function() {
    $('#my-modal').on('modalopen.qm', myAwesomeFunction);
    
    $('#my-modal').on('modalclose', function() {
        alert('The modal window has been closed!');
        myAwesomeFunction();
    });
});                  
                
  • 'modalopen.qm':在模态窗口打开前触发。
  • 'modalclose.qm':在模态窗口关闭后触发。

jquery.quick-modal.js模态窗口插件的github地址为:https://github.com/kevinberonilla/jquery-quick-modal

网友评论