带多种CSS3过渡动画的jquery模态窗口插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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();
    });
});