HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>模态框增强插件 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="http://lyear.itshubao.com/iframe/css/bootstrap.min.css" rel="stylesheet">
<link href="http://example.itshubao.com/demo/css/materialdesignicons.min.css" rel="stylesheet">
<link href="http://libs.itshubao.com/bootstrap3-dialog/bootstrap-dialog.min.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/iframe/css/style.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header"><h4>模态框增强插件 bootstrap3-dialog</h4></div>
<div class="card-body">
<p>插件使用bootstrap3-dialog 1.35.4，github地址：<a href="http://nakupanda.github.io/bootstrap3-dialog" target="_blank">http://nakupanda.github.io/bootstrap3-dialog</a></p>
<p>bootstrap默认使用模态框的时候，需要在当前页面写上模态框的html代码，比较麻烦。该插件对模态框进行了增强，使得使用起来方便了许多。这里针对模板，对颜色和字体图标做出修改，新增背景色。</p>
<blockquote class="text-danger">注意：插件是3的版本。</blockquote>
<h5><strong>最简单的</strong></h5>
<p>只提供要显示的消息，并保留所有其他默认设置。</p>
<button type="button" class="btn btn-default example m-b-10">简单示例</button>
<pre>BootstrapDialog.show({
message: '秦元帅兴兵定北 唐贞观御驾亲征'
});</pre>
<br/>
<h5><strong>对话框标题</strong></h5>
<button type="button" class="btn btn-default example m-b-10">对话框标题</button>
<pre>BootstrapDialog.show({
title: '说唐后传',
message: '白良关刘宝林认父 杀刘方梅夫人明节'
});</pre>
<br/>
<h5><strong>操作对话框标题</strong></h5>
<button type="button" class="btn btn-default example m-b-10">操作对话框标题</button>
<pre>BootstrapDialog.show({
title: '默认标题',
message: '单击下面的按钮。',
buttons: [{
label: '标题 1',
action: function(dialog) {
dialog.setTitle('标题 1');
}
}, {
label: '标题 2',
action: function(dialog) {
dialog.setTitle('标题 2');
}
}]
});</pre>
<br/>
<h5><strong>操作对话框消息</strong></h5>
<button type="button" class="btn btn-default example m-b-10">操作对话框消息</button>
<pre>BootstrapDialog.show({
title: '说唐后传',
message: '单击下面的按钮。',
buttons: [{
label: '消息 1',
action: function(dialog) {
dialog.setMessage('秦琼兵进金灵川 宝林枪挑伍国龙');
}
}, {
label: '消息 2',
action: function(dialog) {
dialog.setMessage('铁板道士遁野马川 屠炉女夜弃黄龙岭');
}
}]
});</pre>
<br/>
<h5><strong>加载远程页（1）</strong></h5>
<p>有一些方法可以将远程页面作为消息加载到BootstrapDialog中，其中一个方法如下所示。这里用项目中的README.md做示例。</p>
<button type="button" class="btn btn-default example m-b-10">加载远程页（1）</button>
<pre>BootstrapDialog.show({
message: $('<div></div>').load('http://example.itshubao.com/test/test.html')
});</pre>
<br/>
<h5><strong>加载远程页（2）</strong></h5>
<p>将远程页加载到BootstrapDialog的另一个解决方案。这一个更灵活，可定制，但它也有点复杂的使用。</p>
<button type="button" class="btn btn-default example m-b-10">加载远程页（2）</button>
<pre>BootstrapDialog.show({
message: function(dialog) {
var $message = $('<div></div>');
var pageToLoad = dialog.getData('pageToLoad');
$message.load(pageToLoad);
return $message;
},
data: {
'pageToLoad': 'http://example.itshubao.com/test/test.html'
}
});</pre>
<br/>
<h5><strong>按钮</strong></h5>
<button type="button" class="btn btn-default example m-b-10">对话框标题</button>
<pre>BootstrapDialog.show({
message: '贞观被困木阳城 叔宝大战祖车轮',
buttons: [{
label: '按钮 1',
title: '鼠标悬停按钮 1'
}, {
label: '按钮 2',
cssClass: 'btn-primary',
data: {
js: 'btn-confirm',
'user-id': '3'
},
action: function(){
alert('您好!');
}
}, {
icon: 'mdi mdi-account',
label: '按钮 3',
title: '鼠标悬停按钮 3',
cssClass: 'btn-warning'
}, {
label: '关闭',
action: function(dialogItself){
dialogItself.close();
}
}]
});</pre>
<br/>
<h5><strong>操作按钮</strong></h5>
<p>BootstrapDialog创建的按钮具有一些额外的功能：</p>
<div>
<p><code>$button.toggleEnable(true|false); </code></p>
<p><code>$button.enable();</code> // 等同于 <code>$button.toggleEnable(true);</code></p>
<p><code>$button.disable();</code> // 等同于 <code>$button.toggleEnable(false);</code></p>
<p><code>$button.toggleSpin(true|false); </code></p>
<p><code>$button.spin();</code> // 等同于 <code>$button.toggleSpin(true);</code></p>
<p><code>$button.stopSpin();</code> // 等同于 <code>$button.toggleSpin(false);</code></p>
</div>
<button type="button" class="btn btn-default example m-b-10">操作按钮</button>
<pre>BootstrapDialog.show({
title: '操作按钮',
message: function(dialog) {
var $content = $('<div><button class="btn btn-success">立即还原按钮状态。</button></div>');
var $footerButton = dialog.getButton('btn-1');
$content.find('button').click({$footerButton: $footerButton}, function(event) {
event.data.$footerButton.enable();
event.data.$footerButton.stopSpin();
dialog.setClosable(true);
});
return $content;
},
buttons: [{
id: 'btn-1',
label: '单击可禁用并有旋转加载动画。',
action: function(dialog) {
var $button = this; // 'this' here is a jQuery object that wrapping the <button> DOM element.
$button.disable();
$button.spin();
dialog.setClosable(false);
}
}]
});</pre>
<br/>
<h5><strong>按钮热键</strong></h5>
<p>尝试按下按钮关联的键。</p>
<p>最后一个按钮被禁用，因此按下它的热键时不会发生任何事情。</p>
<p>请注意，如果对话框中有一些组件需要键盘操作，则可能会发生冲突，您可以尝试下一个示例。</p>
<button type="button" class="btn btn-default example m-b-10">按钮热键</button>
<pre>BootstrapDialog.show({
title: '按钮热键',
message: '试着按一些键...',
onshow: function(dialog) {
dialog.getButton('button-c').disable();
},
buttons: [{
label: '(A) 按钮 A',
hotkey: 65, // Keycode of keyup event of key 'A' is 65.
action: function() {
alert('最后，你按下了按钮A。');
}
}, {
label: '(B) 按钮 B',
hotkey: 66,
action: function() {
alert('你好，我是按钮B！');
}
}, {
id: 'button-c',
label: '(C) 按钮 C',
hotkey: 67,
action: function(){
alert('这是C键，但你按钮是禁用的。');
}
}]
});</pre>
<br/>
<h5><strong>密钥冲突</strong></h5>
<p>尽量避免在代码中执行类似的操作。</p>
<button type="button" class="btn btn-default example m-b-10">对话框标题</button>
<pre>BootstrapDialog.show({
title: '说唐后传',
message: $('<textarea class="form-control" placeholder="尝试在此处输入多行..."></textarea>'),
buttons: [{
label: '(Enter) 按钮 A',
cssClass: 'btn-primary',
hotkey: 13, // Enter.
action: function() {
alert('你按了回车键。');
}
}]
});</pre>
<br/>
<h5><strong>打开多个对话框</strong></h5>
<p>一个好看的堆叠对话框。请注意第二和第三个对话框是可拖动的。</p>
<button type="button" class="btn btn-default example m-b-10">打开多个对话框</button>
<pre>var shortContent = '<p>程咬金长安讨救 小英雄比夺帅印</p>';
var longContent = '';
for(var i = 1; i <= 200; i++) {
longContent += shortContent;
}
BootstrapDialog.show({
title: '另一个长对话框',
message: longContent
});
BootstrapDialog.show({
title: '另一个短的对话框',
message: shortContent,
draggable: true
});
BootstrapDialog.show({
title: '一个长对话框',
message: longContent,
draggable: true
});
BootstrapDialog.show({
title: '一个短的对话框',
message: shortContent
});</pre>
<br/>
<h5><strong>创建对话框实例</strong></h5>
<p><code>BootstrapDialog.show(...)</code> 只是一个快捷方式，如果需要对话框实例，请使用 <code>new</code>。</p>
<button type="button" class="btn btn-default example m-b-10">创建对话框实例</button>
<pre>// Using init options
var dialogInstance1 = new BootstrapDialog({
title: '对话实例 1',
message: '罗仁私出长安城 铁牛大败磨盘山'
});
dialogInstance1.open();
// Construct by using setters
var dialogInstance2 = new BootstrapDialog();
dialogInstance2.setTitle('对话实例 2');
dialogInstance2.setMessage('白良关银牙逞威 铁踹牌大胜唐将');
dialogInstance2.setType(BootstrapDialog.TYPE_SUCCESS);
dialogInstance2.open();
// Using chain callings
var dialogInstance3 = new BootstrapDialog()
.setTitle('对话实例 3')
.setMessage('八宝铜人败罗通 罗仁双锤救兄长')
.setType(BootstrapDialog.TYPE_INFO)
.open();</pre>
<p>事实上 <code>BootstrapDialog.show(...)</code> 还将返回创建的对话框实例。</p>
<button type="button" class="btn btn-default example m-b-10">创建对话框实例</button>
<pre>// 以后可以使用dialogInstance变量。
var dialogInstance = BootstrapDialog.show({
message: '罗仁祸陷飞刀阵 公主喜订三生约'
});</pre>
<br/>
<h5><strong>打开/关闭多个对话框</strong></h5>
<p>这个例子演示了一次打开和关闭一批对话框。<br/>由BootstrapDialog创建的对话框将位于容器中 <code>BootstrapDialog.dialogs</code> 在关闭和销毁之前，重复 <code>BootstrapDialog.dialogs</code> 查找所有尚未销毁的对话框。</p>
<button type="button" class="btn btn-default example m-b-10">打开/关闭多个对话框</button>
<pre>var howManyDialogs = 5;
for(var i = 1; i <= howManyDialogs; i++) {
var dialog = new BootstrapDialog({
title: '对话框编号 ' + i,
message: '你好，我是对话框编号 ' + i,
buttons: [{
label: '关闭此对话框',
action: function(dialogRef){
dialogRef.close();
}
}, {
label: '关闭所有打开的对话框',
cssClass: 'btn-warning',
action: function(){
// 你也可以使用BootstrapDialog.closeAll()关闭所有对话框。
$.each(BootstrapDialog.dialogs, function(id, dialog){
dialog.close();
});
}
}]
});
dialog.open();
}</pre>
<br/>
<h5><strong>带标识符的按钮</strong></h5>
<button type="button" class="btn btn-default example m-b-10">带标识符的按钮</button>
<pre>var dialog = new BootstrapDialog({
message: '苏定方计害罗通 屠炉女怜才相救',
buttons: [{
id: 'btn-1',
label: '按钮 1'
}]
});
dialog.realize();
var btn1 = dialog.getButton('btn-1');
btn1.click({'name': '说唐后传'}, function(event){
alert('您好, ' + event.data.name);
});
dialog.open();</pre>
<br/>
<h5><strong>消息类型</strong></h5>
<button type="button" class="btn btn-default example m-b-10">消息类型</button>
<pre>var types = [BootstrapDialog.TYPE_DEFAULT,
BootstrapDialog.TYPE_INFO,
BootstrapDialog.TYPE_PRIMARY,
BootstrapDialog.TYPE_SUCCESS,
BootstrapDialog.TYPE_WARNING,
BootstrapDialog.TYPE_DANGER,
BootstrapDialog.TYPE_SECONDARY,
BootstrapDialog.TYPE_PURPLE,
BootstrapDialog.TYPE_PINK,
BootstrapDialog.TYPE_CYAN,
BootstrapDialog.TYPE_YELLOW,
BootstrapDialog.TYPE_BROWN,
BootstrapDialog.TYPE_DARK];
$.each(types, function(index, type){
BootstrapDialog.show({
type: type,
title: '消息类型: ' + type,
message: '下一步怎么办？',
buttons: [{
label: '我什么也不做。'
}]
});
});</pre>
<br/>
<h5><strong>更改对话框类型</strong></h5>
<button type="button" class="btn btn-default example m-b-10">更改对话框类型</button>
<pre>var types = [BootstrapDialog.TYPE_DEFAULT,
BootstrapDialog.TYPE_INFO,
BootstrapDialog.TYPE_PRIMARY,
BootstrapDialog.TYPE_SUCCESS,
BootstrapDialog.TYPE_WARNING,
BootstrapDialog.TYPE_DANGER,
BootstrapDialog.TYPE_SECONDARY,
BootstrapDialog.TYPE_PURPLE,
BootstrapDialog.TYPE_PINK,
BootstrapDialog.TYPE_CYAN,
BootstrapDialog.TYPE_YELLOW,
BootstrapDialog.TYPE_BROWN,
BootstrapDialog.TYPE_DARK];
var buttons = [];
$.each(types, function(index, type) {
buttons.push({
label: type,
cssClass: 'btn-default btn-sm m-b-5',
action: function(dialog) {
dialog.setType(type);
}
});
});
BootstrapDialog.show({
title: '更改对话框类型',
message: '点击下面的按钮...',
buttons: buttons
});</pre>
<br/>
<h5><strong>较大的对话框</strong></h5>
<p>默认情况下，对话框大小为 <code>'size-normal'</code> 或 <code>BootstrapDialog.SIZE_NORMAL</code>，但是可以通过将选项 <code>'size'</code> 设置为 <code>'size-large'</code> 或者 <code>BootstrapDialog.SIZE_LARGE</code>。</p>
<button type="button" class="btn btn-default example m-b-10">较大的对话框</button>
<pre>BootstrapDialog.show({
size: BootstrapDialog.SIZE_LARGE,
message: '破番营康王奔逃 杀定方伸雪父仇',
buttons: [{
label: '按钮 1'
}, {
label: '按钮 2',
cssClass: 'btn-primary',
action: function(){
alert('说唐后传');
}
}, {
icon: 'mdi mdi-lock',
label: '按钮 3',
cssClass: 'btn-warning'
}, {
label: '关闭',
action: function(dialogItself){
dialogItself.close();
}
}]
});</pre>
<br/>
<h5><strong>更多对话框大小</strong></h5>
<p>请注意，指定 <code>BootstrapDialog.SIZE_WIDE</code> 等于在引导模式上使用css类 <code>'modal-lg'</code>。</p>
<button type="button" class="btn btn-default example m-b-10">更多对话框大小</button>
<pre>BootstrapDialog.show({
title: '更多对话框大小',
message: '贺兰山知节议亲 洞房中公主尽节',
buttons: [{
label: '默认',
action: function(dialog){
dialog.setTitle('默认');
dialog.setSize(BootstrapDialog.SIZE_NORMAL);
}
}, {
label: '小',
action: function(dialog){
dialog.setTitle('小');
dialog.setSize(BootstrapDialog.SIZE_SMALL);
}
}, {
label: '宽',
action: function(dialog){
dialog.setTitle('宽');
dialog.setSize(BootstrapDialog.SIZE_WIDE);
}
}, {
label: '大',
action: function(dialog){
dialog.setTitle('大');
dialog.setSize(BootstrapDialog.SIZE_LARGE);
}
}]
});</pre>
<br/>
<h5><strong>丰富的信息</strong></h5>
<p>BootstrapDialog支持显示丰富的内容，因此您甚至可以在对话框中使用视频剪辑作为消息。</p>
<button type="button" class="btn btn-default example m-b-10">丰富的信息</button>
<pre>var $textAndPic = $('<div></div>');
$textAndPic.append('这是什么？ <br />');
$textAndPic.append('<img src="./images/logo-sidebar.png" />');
BootstrapDialog.show({
title: '猜猜那是什么',
message: $textAndPic,
buttons: [{
label: '吉泽明步',
action: function(dialogRef){
dialogRef.close();
}
}, {
label: '光年',
action: function(dialogRef){
dialogRef.close();
}
}]
});</pre>
<br/>
<h5><strong>对话框可关闭/不可关闭</strong></h5>
<p>如果选项 <code>closable</code> 设置为false，则将禁用默认关闭行为，但仍可以使用 <code>dialog.close()</code>。</p>
<button type="button" class="btn btn-default example m-b-10">对话框可关闭/不可关闭</button>
<pre>BootstrapDialog.show({
message: '龙门县将星降世 唐天子梦扰青龙',
closable: false,
buttons: [{
label: '对话可关闭！',
cssClass: 'btn-success',
action: function(dialogRef){
dialogRef.setClosable(true);
}
}, {
label: '对话无法关闭！',
cssClass: 'btn-warning',
action: function(dialogRef){
dialogRef.setClosable(false);
}
}, {
label: '关闭对话框',
action: function(dialogRef){
dialogRef.close();
}
}]
});</pre>
<br/>
<h5><strong>关闭对话框的更多控件</strong></h5>
<p>默认情况下，当选项 <code>closable</code> 设置为 <code>true</code> 时，可以通过以下方式关闭对话框：单击对话框外部，按ESC键，单击对话框标题右侧的关闭图标。如果只想在单击对话框标题中的关闭图标时关闭对话框，请尝试将 <code>closeByBackdrop</code> 和 <code>closeByKeyboard</code> 选项都设置为 <code>false</code>。</p>
<button type="button" class="btn btn-default example m-b-10">关闭对话框的更多控件</button>
<pre>BootstrapDialog.show({
message: '胜班师罗通配丑妇 不齐国差使贡金珠',
message: '单击外部并按ESC键不能关闭此对话框。',
closable: true,
closeByBackdrop: false,
closeByKeyboard: false,
buttons: [{
label: '关闭对话框',
action: function(dialogRef){
dialogRef.close();
}
}]
});</pre>
<br/>
<h5><strong>禁用动画</strong></h5>
<p>将选项 <code>animate</code> 设置为false以禁用打开对话框的动画。</p>
<p>如果要全局禁用动画，请尝试执行以下操作：</p>
<pre>BootstrapDialog.configDefaultOptions({
animate: false
});</pre>
<button type="button" class="btn btn-default example m-b-10">禁用动画</button>
<pre>BootstrapDialog.show({
message: '此对话框上没有淡入效果。',
animate: false,
buttons: [{
label: '关闭对话框',
action: function(dialogRef){
dialogRef.close();
}
}]
});</pre>
<br/>
<h5><strong>自动旋转图标</strong></h5>
<button type="button" class="btn btn-default example m-b-10">自动旋转图标</button>
<pre>BootstrapDialog.show({
message: '我发送ajax请求！',
buttons: [{
icon: 'mdi mdi-telegram',
label: '发送ajax请求',
cssClass: 'btn-primary',
autospin: true,
action: function(dialogRef){
dialogRef.enableButtons(false);
dialogRef.setClosable(false);
dialogRef.getModalBody().html('对话框在5秒内关闭。');
setTimeout(function(){
dialogRef.close();
}, 5000);
}
}, {
label: '关闭',
action: function(dialogRef){
dialogRef.close();
}
}]
});</pre>
<br/>
<h5><strong>可拖动对话框</strong></h5>
<p>当选项 <code>draggable</code> 设置为 <code>true</code>，可以通过拖动对话框的标题来移动对话框。</p>
<p>如果要更改悬停在对话框标题上的光标形状，可以尝试以下css行：</p>
<pre>.bootstrap-dialog .modal-header.bootstrap-dialog-draggable {
cursor: move;
}</pre>
<button type="button" class="btn btn-default example m-b-10">可拖动对话框</button>
<pre>BootstrapDialog.show({
title: '可拖动对话框',
message: '尝试拖动对话框标题以移动对话框。',
draggable: true
});</pre>
<br/>
<h5><strong>操纵对话框</strong></h5>
<button type="button" class="btn btn-default example m-b-10">操纵对话框</button>
<pre>var dialog = new BootstrapDialog({
message: function(dialogRef){
var $message = $('<div>好，此对话框没有页眉和页脚，但您可以使用此按钮关闭对话框： </div>');
var $button = $('<button class="btn btn-primary btn-lg btn-block">关闭对话框</button>');
$button.on('click', {dialogRef: dialogRef}, function(event){
event.data.dialogRef.close();
});
$message.append($button);
return $message;
},
closable: false
});
dialog.realize();
dialog.getModalHeader().hide();
dialog.getModalFooter().hide();
dialog.getModalBody().css('background-color', '#0088cc');
dialog.getModalBody().css('color', '#fff');
dialog.open();</pre>
<br/>
<h5><strong>在对话框中添加其他css类</strong></h5>
<p>这对于将效果应用于特定对话框很有用。</p>
<p>例如，如果您想让 <code>'login-dialog'</code> 的大小变小，可以这样做：</p>
<pre><style>
.login-dialog .modal-dialog {
width: 300px;
}
</style></pre>
<button type="button" class="btn btn-default example m-b-10">在对话框中添加其他css类</button>
<pre>BootstrapDialog.show({
title: '登录',
message: '假设这里是你的登录表单',
cssClass: 'login-dialog',
buttons: [{
label: '立即登录',
cssClass: 'btn-primary',
action: function(dialog){
dialog.close();
}
}]
});</pre>
<br/>
<h5><strong>向对话框添加说明（用于辅助功能）</strong></h5>
<p>这将向对话框添加一个 <code>aria-describedby</code> 属性，该属性为屏幕阅读器提供对话框的描述</p>
<button type="button" class="btn btn-default example m-b-10">向对话框添加说明（用于辅助功能）</button>
<pre>BootstrapDialog.show({
title: '添加说明',
message: '说明将显示给屏幕阅读器。',
description: '这是一个 Bootstrap 的对话框'
});</pre>
<br/>
<h5><strong>数据绑定</strong></h5>
<button type="button" class="btn btn-default example m-b-10">数据绑定</button>
<pre>var data1 = 'Apple';
var data2 = 'Orange';
var data3 = ['Banana', 'Pear'];
BootstrapDialog.show({
message: '您好！',
data: {
'data1': data1,
'data2': data2,
'data3': data3
},
buttons: [{
label: '看看你有什么',
cssClass: 'btn-primary',
action: function(dialogRef){
alert(dialogRef.getData('data1'));
alert(dialogRef.getData('data2'));
alert(dialogRef.getData('data3').join(', '));
}
}]
});</pre>
<br/>
<h5><strong>对话事件</strong></h5>
<p>请注意，如果要使用setter配置事件处理程序，请使用 <code>dialog.onShow(function)</code> 和 <code>dialog.onHide(function)</code>。</p>
<button type="button" class="btn btn-default example m-b-10">对话事件</button>
<pre>BootstrapDialog.show({
message: 'Hello world!',
onshow: function(dialogRef){
alert('对话框弹出，它的消息是 ' + dialogRef.getMessage());
},
onshown: function(dialogRef){
alert('Dialog is popped up.');
},
onhide: function(dialogRef){
alert('对话框弹出，其消息是 ' + dialogRef.getMessage());
},
onhidden: function(dialogRef){
alert('对话框被弹出。');
}
});</pre>
<br/>
<h5><strong>停止关闭对话框</strong></h5>
<p>选项 <code>onhide</code> 使您有机会根据某些条件停止关闭对话框，使 <code>onhide</code> 回调返回 <code>false</code> 以停止关闭对话框。</p>
<p>在下面的示例中，只有当您最喜欢的水果是 <code><strong>香蕉</strong></code>时，对话框才会关闭（不区分大小写）。</p>
<button type="button" class="btn btn-default example m-b-10">停止关闭对话框</button>
<pre>BootstrapDialog.show({
message: 'Your most favorite fruit: <input type="text" class="form-control">',
onhide: function(dialogRef){
var fruit = dialogRef.getModalBody().find('input').val();
if($.trim(fruit.toLowerCase()) !== 'banana') {
alert('Need banana!');
return false;
}
},
buttons: [{
label: '关闭',
action: function(dialogRef) {
dialogRef.close();
}
}]
});</pre>
<br/>
<h5><strong>更多快捷方式</strong></h5>
<button type="button" class="btn btn-default example m-b-10">更多快捷方式</button>
<pre>BootstrapDialog.alert('Hi Apple!');</pre>
<br/>
<h5><strong>带回调的警报</strong></h5>
<button type="button" class="btn btn-default example m-b-10">带回调的警报</button>
<pre>BootstrapDialog.alert('Hi Apple!', function(){
alert('Hi Orange!');
});</pre>
<br/>
<h5><strong>自定义对话框类型、标题等</strong></h5>
<p>下面显示的所有选项都是可选的</p>
<button type="button" class="btn btn-default example m-b-10">自定义对话框类型、标题等</button>
<pre>BootstrapDialog.show({
title: '警告',
message: '警告！不要香蕉！',
type: BootstrapDialog.TYPE_WARNING, // Default value is BootstrapDialog.TYPE_PRIMARY
closable: true, // Default value is false
draggable: true, // Default value is false
buttonLabel: '吼！为什么？', // Default value is 'OK',
callback: function(result) {
// 如果单击按钮，则结果为true；如果用户直接关闭对话框，则结果为false。
alert('答案是： ' + result);
}
});</pre>
<br/>
<h5><strong>确认框</strong></h5>
<button type="button" class="btn btn-default example m-b-10">确认框</button>
<pre>BootstrapDialog.confirm('Hi Apple, are you sure?');</pre>
<br/>
<h5><strong>带回调的确认框</strong></h5>
<button type="button" class="btn btn-default example m-b-10">带回调的确认框</button>
<pre>BootstrapDialog.confirm('Hi Apple, are you sure?', function(result){
if(result) {
alert('Yup.');
}else {
alert('Nope.');
}
});</pre>
<br/>
<h5><strong>就像我们在警报中所做的，我们可以控制确认对话框。</strong></h5>
<button type="button" class="btn btn-default example m-b-10">就像我们在警报中所做的，我们可以控制确认对话框。</button>
<pre>BootstrapDialog.confirm({
title: 'WARNING',
message: 'Warning! Drop your banana?',
type: BootstrapDialog.TYPE_WARNING, // Default value is BootstrapDialog.TYPE_PRIMARY
closable: true, // Default value is false
draggable: true, // Default value is false
btnCancelLabel: 'Do not drop it!', // Default value is 'Cancel',
btnOKLabel: 'Drop it!', // Default value is 'OK',
btnOKClass: 'btn-warning', // If you didn't specify it, dialog type will be used,
callback: function(result) {
// result will be true if button was click, while it will be false if users close the dialog directly.
if(result) {
alert('Yup.');
}else {
alert('Nope.');
}
}
});</pre>
<br/>
<h5><strong>国际化</strong></h5>
<p>要为您提供所需的本地消息，请在使用 <code>BootstrapDialog</code> 之前重置下面的这些消息。</p>
<pre>BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DEFAULT] = 'Information';
BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_INFO] = 'Information';
BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_PRIMARY] = 'Information';
BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_SUCCESS] = 'Success';
BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_WARNING] = 'Warning';
BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DANGER] = 'Danger';
BootstrapDialog.DEFAULT_TEXTS['OK'] = 'OK';
BootstrapDialog.DEFAULT_TEXTS['CANCEL'] = 'Cancel';
BootstrapDialog.DEFAULT_TEXTS['CONFIRM'] = 'Confirmation';</pre>
<br/>
<h5><strong>可用选项</strong></h5>
<p>请注意，下面描述的所有选项都是可选的，但如果您甚至不给它一条消息来显示，则会出现一个奇怪的对话框。</p>
<p>大多数选项可以通过init选项或属性设置器设置。</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Option</th>
<th>Possible values</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td>
BootstrapDialog.TYPE_DEFAULT or 'type-default' <br />
BootstrapDialog.TYPE_INFO or 'type-info' <br />
<strong>BootstrapDialog.TYPE_PRIMARY or 'type-primary' (default)</strong> <br />
BootstrapDialog.TYPE_SUCCESS or 'type-success' <br />
BootstrapDialog.TYPE_WARNING or 'type-warning' <br />
BootstrapDialog.TYPE_DANGER or 'type-danger'
</td>
<td>
Give your dialog a specific look, color scheme can be seen on <a href="http://getbootstrap.com/css/#buttons" target="_blank">Bootstrap's Button</a>.
</td>
</tr>
<tr>
<td>size</td>
<td>
<strong>BootstrapDialog.SIZE_NORMAL or 'size-normal' (default)</strong> <br />
BootstrapDialog.SIZE_WIDE or 'size-wide' <br />
BootstrapDialog.SIZE_LARGE or 'size-large' <br />
</td>
<td>
-
</td>
</tr>
<tr>
<td>cssClass</td>
<td>
-
</td>
<td>
Additional css classes that will be added to your dialog.
</td>
</tr>
<tr>
<td>title</td>
<td>
String or Object(html)
</td>
<td>
-
</td>
</tr>
<tr>
<td>message</td>
<td>
String or Object(html)
</td>
<td>
-
</td>
</tr>
<tr>
<td>buttons</td>
<td>
array
</td>
<td>
Examples:
<br/>
<button type="button" class="btn btn-default example m-b-10">执行</button>
<pre>
BootstrapDialog.show({
title: 'Say-hello dialog',
message: 'Hello world!',
buttons: [{
id: 'btn-ok',
icon: 'glyphicon glyphicon-check',
label: 'OK',
cssClass: 'btn-primary',
data: {
js: 'btn-confirm',
'user-id': '3'
},
autospin: false,
action: function(dialogRef){
dialogRef.close();
}
}]
});
</pre>
<strong>id</strong>: optional, if id is set, you can use dialogInstance.getButton(id) to get the button later. <br />
<strong>icon</strong>: optional, if set, the specified icon will be added to the button. <br />
<strong>cssClass</strong>: optional, additional css class to be added to the button. <br />
<strong>data</strong>: optional, object containing data attributes to be added to the button. <br />
<strong>autospin</strong>: optional, if it's true, after clicked the button a spinning icon appears. <br />
<strong>action</strong>: optional, if provided, the callback will be invoked after the button is clicked, and the dialog instance will be passed to the callback function.
</td>
</tr>
<tr>
<td>closable</td>
<td>
true | false
</td>
<td>
When set to <strong>true</strong>, you can close the dialog by: <br />
<ul>
<li>Clicking the close icon in dialog header.</li>
<li>Clicking outside the dialog.</li>
<li>ESC key.</li>
</ul>
</td>
</tr>
<tr>
<td>spinicon</td>
<td>
Icon class name, for example 'glyphicon glyphicon-check'. <br />
<strong>Default value is 'glyphicon glyphicon-asterisk'.</strong>
</td>
<td>
Specify what icon to be used as the spinning icon when button's 'autospin' is set to true.
</td>
</tr>
<tr>
<td>data</td>
<td>
Key-value object. For example {'id' : '100'}
</td>
<td>
Data to be bound to the dialog.
</td>
</tr>
<tr>
<td>onshow</td>
<td>
function
</td>
<td>
If provided, it will be invoked when the dialog is popping up. <br />
</td>
</tr>
<tr>
<td>onshown</td>
<td>
function
</td>
<td>
If provided, it will be invoked when the dialog is popped up. <br />
</td>
</tr>
<tr>
<td>onhide</td>
<td>
function
</td>
<td>
If provided, it will be invoked when the dialog is popping down. <br />
</td>
</tr>
<tr>
<td>onhidden</td>
<td>
function
</td>
<td>
If provided, it will be invoked when the dialog is popped down. <br />
</td>
</tr>
<tr>
<td>autodestroy</td>
<td>
<strong>true (default)</strong> | false
</td>
<td>
When it's true, all modal stuff will be removed from the DOM tree after the dialog is popped down, set it to false if you need your dialog (same instance) pups up and down again and again.
</td>
</tr>
<tr>
<td>description</td>
<td>
String
</td>
<td>
If provided, 'aria-describedby' attribute will be added to the dialog with the description string as its value. This can improve accessibility, as the description can be read by screen readers.
</td>
</tr>
<tr>
<td>nl2br</td>
<td>
true | false
</td>
<td>
Automatically convert line breaking character to <br /> if it's set to true, everything keeps original if it's false.
</td>
</tr>
</tbody>
</table>
<h5><strong>可用方法</strong></h5>
<table class="table table-bordered">
<thead>
<tr>
<th>
Method
</th>
<th>
Description
</th>
</tr>
</thead>
<tbody>
<tr>
<td>open()</td>
<td>Open the dialog. Usage: dialogInstance.open()</td>
</tr>
<tr>
<td>close()</td>
<td>Close the dialog. Usage: dialogInstance.close()</td>
</tr>
<tr>
<td>getModal()</td>
<td>Return the raw modal, equivalent to $('<div class='modal fade'...></div>')</td>
</tr>
<tr>
<td>getModalDialog()</td>
<td>Return the raw modal dialog.</td>
</tr>
<tr>
<td>getModalContent()</td>
<td>Return the raw modal content.</td>
</tr>
<tr>
<td>getModalHeader()</td>
<td>Return the raw modal header.</td>
</tr>
<tr>
<td>getModalBody()</td>
<td>Return the raw modal body.</td>
</tr>
<tr>
<td>getModalFooter()</td>
<td>Return the raw modal footer.</td>
</tr>
<tr>
<td>getData(key)</td>
<td>Get data entry according to the given key, returns null if no data entry found.</td>
</tr>
<tr>
<td>setData(key, value)</td>
<td>Bind data entry to dialog instance, value can be any types that javascript supports.</td>
</tr>
<tr>
<td>enableButtons(boolean)</td>
<td>Disable all buttons in dialog footer when it's false, enable all when it's true.</td>
</tr>
<tr>
<td>setClosable(boolean)</td>
<td>When set to true (default), dialog can be closed by clicking close icon in dialog header, or by clicking outside the dialog, or, ESC key is pressed.</td>
</tr>
<tr>
<td>realize()</td>
<td>Calling dialog.open() will automatically get this method called first, but if you want to do something on your dialog before it's shown, you can manually call dialog.realize() before calling dialog.open().</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/jquery.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://libs.itshubao.com/bootstrap3-dialog/bootstrap-dialog.min.js"></script>
</body>
</html>