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

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