这是一款非常实用的基于bootstrap的jQuery多功能模态对话框插件。该jQuery模态对话框集警告框、确认框和对话框于一体。是一款不可多得的多功能、多用途的模态对话框插件。它的主要特点有：

  • 可以通过AJAX直接将调用内容到对话框中。
  • 可以在指定的时间后自动关闭对话框。
  • 可以设置为点击模态背景不关闭对话框。
  • 拥有丰富的回调函数。

使用方法

插件依赖

该jQuery模态对话框插件有俩个外部依赖：

  • Bootstrap by Twitter > v2
  • jQuery library > v1.8

在页面中引入jQuery和jquery-confirm.js以及jquery-confirm.css文件，同时引入bootstrap依赖文件。

<link rel="stylesheet" href="demo/libs/bootstrap.min.css">
<link rel="stylesheet" href="demo/libs/bootstrap-theme.min.css">                
<link rel="stylesheet" type="text/css" href="css/jquery-confirm.css" />
<script src="js/jquery.min.js"></script>
<script src="demo/libs/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-confirm.js"></script>
基本使用

显示对话框：

$.alert({
    title: 'Alert!',
    content: 'Alert! alert! alert!',
    confirm: function(){
        alert('the user clicked yes');
    }
});

显示确认框

$.confrim({
    title: 'Confirm!',
    content: 'Confirm! Confirm! Confirm!',
    confirm: function(){
        alert('the user clicked confirm');
    },
    cancel: function(){
        alert('the user clicked cancel')
    }
});

注意：$.confirm()和$.alert()方法都是jconfirm()方法的别名。

全局默认参数

jconfirm.pluginDefaults = {
    title: 'Hello',
    content: 'Are you sure to continue?',
    icon: '',
    confirmButton: 'Okay',
    cancelButton: 'Cancel',
    confirmButtonClass: 'btn-default',
    cancelButtonClass: 'btn-default',
    theme: 'white',
    animation: 'scale',
    animationSpeed: 400,
    confirm: function () {
    },
    cancel: function () {
    },
    backgroundDismiss: true,
    autoClose: false,
    closeIcon: true
};

配置参数

参数名称 参数类型 默认值 描述
title String 'Hello' 模态对话框的标题
content String 'Are you sure to continue?' 模态对话框的的内容
icon String '' 模态对话框标题前的小图标
confrimButton String 'Okay' 模态对话框确认按钮的文本
cancelButton String 'Cancel' 模态对话框取消按钮的文本
confirmButtonClass String 'btn-default' 模态对话框确认按钮的class
cancelButtonClass String 'btn-default' 模态对话框取消按钮的class
theme String 'white' 模态对话框的颜色主题。
可用选项有 'white' & 'black'
animation String 'scale' 模态对话框的打开/关闭动画
可用选项有 'scale', 'top', 'bottom', 'left', 'right', 'zoom', 'opacity', 'none', 'rotate', 'rotatex', 'rotatey', 'scalex', 'scaley', 'blur'.
animationSpeed Number 400 模态对话框动画的持续时间，单位毫秒。
confirm Function function(){} 当用户点击模态对话框的确认按钮后的回调函数。
cancel Function function(){} 当用户点击模态对话框的取消按钮后的回调函数。
backgroundDismiss Boolean true 是否允许用户点击模态对话框以外的区域来改变模态对话框。
autoClose String false 如果用户无操作，在指定的时间后关闭模态对话框。
possible option 'confirm|400'

字符串通过 '|'来分割, 前面的部分指定触发的按钮, 'confirm' 或者 'cancel'。 后面的部分指定等待的时间，单位毫秒。

closeIcon Boolean true 如果所有的按钮都不可用，关闭模态窗口的小图标变为一张图片（dialog模式）
。 你可以通过设置icon的值为false来移除它。

方法

close()

在调用$.alert或$.confirm方法时，它们返回一个引用对象，你可以使用该对象来操作模态对话框。

var obj = $.alert({
    title: 'Closing this in 2 seconds.',
    content: 'Closing me via SetTimeout for demonstration.'
})
setTimeout(function(){
    // some point in future.
    obj.close();
},2000);