Bootstrap之BootstrapDialog
Make use of Bootstrap's modal more monkey-friendly.
参考地址:http://nakupanda.github.io/bootstrap3-dialog/
模态弹框:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Dialog弹出层:
BootstrapDialog.alert('I want banana!');
Examples
Simplest
只提供信息显示,并保持所有其他事情默认。
BootstrapDialog.show({
message: 'Hi Apple!'
});
Dialog Title
BootstrapDialog.show({
title: 'Say-hello dialog',
message: 'Hi Apple!'
});
操作对话标题
BootstrapDialog.show({
title: 'Default Title',
message: 'Click buttons below.',
buttons: [{
label: 'Title 1',
action: function(dialog) {
dialog.setTitle('Title 1');
}
}, {
label: 'Title 2',
action: function(dialog) {
dialog.setTitle('Title 2');
}
}]
});
操作对话信息
BootstrapDialog.show({
title: 'Default Title',
message: 'Click buttons below.',
buttons: [{
label: 'Message 1',
action: function(dialog) {
dialog.setMessage('Message 1');
}
}, {
label: 'Message 2',
action: function(dialog) {
dialog.setMessage('Message 2');
}
}]
});
加载远程页面(1)
BootstrapDialog.show({
message: $('<div></div>').load('remote.html')
});
加载远程页面 (2)
BootstrapDialog.show({
message: function(dialog) {
var $message = $('<div></div>');
var pageToLoad = dialog.getData('pageToLoad');
$message.load(pageToLoad); return $message;
},
data: {
'pageToLoad': 'remote.html'
}
});
Buttons
BootstrapDialog.show({
message: 'Hi Apple!',
buttons: [{
label: 'Button 1'
}, {
label: 'Button 2',
cssClass: 'btn-primary',
action: function(){
alert('Hi Orange!');
}
}, {
icon: 'glyphicon glyphicon-ban-circle',
label: 'Button 3',
cssClass: 'btn-warning'
}, {
label: 'Close',
action: function(dialogItself){
dialogItself.close();
}
}]
});
操作Buttons
通过bootstrapdialog创建按钮有一些额外的功能:
$button.toggleEnable(true|false);
$button.enable(); // 相当于 $button.toggleEnable(true);
$button.disable(); // 相当于 $button.toggleEnable(false);
$button.toggleSpin(true|false);
$button.spin(); // 相当于 $button.toggleSpin(true);
$button.stopSpin(); // 相当于 $button.toggleSpin(false);
BootstrapDialog.show({
title: 'Manipulating Buttons',
message: function(dialog) {
var $content = $('<div><button class="btn btn-success">Revert button status right now.</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: 'Click to disable and spin.',
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);
}
}]
});
按钮的热键
试着按下面的按钮。
最后一个按钮被禁用,所以没有事情发生,当按下热键。
请注意,如果您的对话框中有一些需要键盘操作的组件,可能会出现冲突,您可以尝试下一个示例。
BootstrapDialog.show({
title: 'Button Hotkey',
message: 'Try to press some keys...',
onshow: function(dialog) {
dialog.getButton('button-c').disable();
},
buttons: [{
label: '(A) Button A',
hotkey: 65, // Keycode of keyup event of key 'A' is 65.
action: function() {
alert('Finally, you loved Button A.');
}
}, {
label: '(B) Button B',
hotkey: 66,
action: function() {
alert('Hello, this is Button B!');
}
}, {
id: 'button-c',
label: '(C) Button C',
hotkey: 67,
action: function(){
alert('This is Button C but you won\'t see me dance.');
}
}]
});
创建 dialog 实例
BootstrapDialog.show(...) 只是一个快捷方式,如果你需要对话框实例,用“新”。
// Using init options
var dialogInstance1 = new BootstrapDialog({
title: 'Dialog instance 1',
message: 'Hi Apple!'
});
dialogInstance1.open(); // Construct by using setters
var dialogInstance2 = new BootstrapDialog();
dialogInstance2.setTitle('Dialog instance 2');
dialogInstance2.setMessage('Hi Orange!');
dialogInstance2.setType(BootstrapDialog.TYPE_SUCCESS);
dialogInstance2.open(); // Using chain callings
var dialogInstance3 = new BootstrapDialog()
.setTitle('Dialog instance 3')
.setMessage('Hi Everybody!')
.setType(BootstrapDialog.TYPE_INFO)
.open();
事实上BootstrapDialog.show(...) 也将返回创建的对话框实例。
// You can use dialogInstance later.
var dialogInstance = BootstrapDialog.show({
message: 'Hello Banana!'
});
Button with identifier
var dialog = new BootstrapDialog({
message: 'Hi Apple!',
buttons: [{
id: 'btn-1',
label: 'Button 1'
}]
});
dialog.realize();
var btn1 = dialog.getButton('btn-1');
btn1.click({'name': 'Apple'}, function(event){
alert('Hi, ' + event.data.name);
});
dialog.open();
较大的对话框
默认情况下,对话框的大小是 'size-normal' 或 BootstrapDialog.SIZE_NORMAL, 但你可以通过设置选项的 'size' 的'size-large' 或BootstrapDialog.SIZE_LARGE.
BootstrapDialog.show({
size: BootstrapDialog.SIZE_LARGE,
message: 'Hi Apple!',
buttons: [{
label: 'Button 1'
}, {
label: 'Button 2',
cssClass: 'btn-primary',
action: function(){
alert('Hi Orange!');
}
}, {
icon: 'glyphicon glyphicon-ban-circle',
label: 'Button 3',
cssClass: 'btn-warning'
}, {
label: 'Close',
action: function(dialogItself){
dialogItself.close();
}
}]
});
More dialog sizes
Please note that specifying BootstrapDialog.SIZE_WIDE is equal to using css class 'modal-lg' on Bootstrap Modal.
BootstrapDialog.show({
title: 'More dialog sizes',
message: 'Hi Apple!',
buttons: [{
label: 'Normal',
action: function(dialog){
dialog.setTitle('Normal');
dialog.setSize(BootstrapDialog.SIZE_NORMAL);
}
}, {
label: 'Small',
action: function(dialog){
dialog.setTitle('Small');
dialog.setSize(BootstrapDialog.SIZE_SMALL);
}
}, {
label: 'Wide',
action: function(dialog){
dialog.setTitle('Wide');
dialog.setSize(BootstrapDialog.SIZE_WIDE);
}
}, {
label: 'Large',
action: function(dialog){
dialog.setTitle('Large');
dialog.setSize(BootstrapDialog.SIZE_LARGE);
}
}]
});
更多信息
bootstrapdialog支持显示丰富的内容,所以你甚至可以使用一个视频剪辑你的对话框中的消息。
var $textAndPic = $('<div></div>');
$textAndPic.append('Who\'s this? <br />');
$textAndPic.append('<img src="./images/pig.ico" />'); BootstrapDialog.show({
title: 'Guess who that is',
message: $textAndPic,
buttons: [{
label: 'Acky',
action: function(dialogRef){
dialogRef.close();
}
}, {
label: 'Robert',
action: function(dialogRef){
dialogRef.close();
}
}]
});
Dialog closable / unclosable
If option 'closable' is set to false, the default closing behaviors will be disabled, but you can still close the dialog by using dialog.close().
BootstrapDialog.show({
message: 'Hi Apple!',
closable: false,
buttons: [{
label: 'Dialog CLOSABLE!',
cssClass: 'btn-success',
action: function(dialogRef){
dialogRef.setClosable(true);
}
}, {
label: 'Dialog UNCLOSABLE!',
cssClass: 'btn-warning',
action: function(dialogRef){
dialogRef.setClosable(false);
}
}, {
label: 'Close the dialog',
action: function(dialogRef){
dialogRef.close();
}
}]
});
关闭对话框的更多控件
默认情况下,当选择 'closable' 设置为true,对话框可以通过这些方式关闭:点击在对话框中,按ESC键,点击对话框标题右侧的关闭图标。
如果你想让你的对话框关闭时,对话框标题的关闭图标被点击,可以设置的选项 'closeByBackdrop' and 'closeByKeyboard' 为 false.
BootstrapDialog.show({
message: 'Hi Apple!',
message: 'You can not close this dialog by clicking outside and pressing ESC key.',
closable: true,
closeByBackdrop: false,
closeByKeyboard: false,
buttons: [{
label: 'Close the dialog',
action: function(dialogRef){
dialogRef.close();
}
}]
});
Confirm
BootstrapDialog.confirm('Hi Apple, are you sure?');
Confirm with callback
BootstrapDialog.confirm('Hi Apple, are you sure?', function(result){
if(result) {
alert('Yup.');
}else {
alert('Nope.');
}
});
Available options
Please note that all options described below are optional, but you will have a weird dialog if you don't even give it a message to display.
Most options can be set via init options or property setters.
Option | Possible values | Description |
---|---|---|
type |
BootstrapDialog.TYPE_DEFAULT or 'type-default' BootstrapDialog.TYPE_INFO or 'type-info' BootstrapDialog.TYPE_PRIMARY or 'type-primary' (default) BootstrapDialog.TYPE_SUCCESS or 'type-success' BootstrapDialog.TYPE_WARNING or 'type-warning' BootstrapDialog.TYPE_DANGER or 'type-danger' |
Give your dialog a specific look, color scheme can be seen on Bootstrap's Button. |
size |
BootstrapDialog.SIZE_NORMAL or 'size-normal' (default) BootstrapDialog.SIZE_WIDE or 'size-wide' BootstrapDialog.SIZE_LARGE or 'size-large' |
- |
cssClass | - | Additional css classes that will be added to your dialog. |
title | String or Object(html) | - |
message | String or Object(html) | - |
buttons | array | Examples:
BootstrapDialog.show({ |
id: optional, if id is set, you can use dialogInstance.getButton(id) to get the button later. |
||
closable | true | false |
When set to true, you can close the dialog by:
|
spinicon |
Icon class name, for example 'glyphicon glyphicon-check'. Default value is 'glyphicon glyphicon-asterisk'. |
Specify what icon to be used as the spinning icon when button's 'autospin' is set to true. |
data | Key-value object. For example {'id' : '100'} | Data to be bound to the dialog. |
onshow | function | If provided, it will be invoked when the dialog is popping up. |
onshown | function | If provided, it will be invoked when the dialog is popped up. |
onhide | function | If provided, it will be invoked when the dialog is popping down. |
onhidden | function | If provided, it will be invoked when the dialog is popped down. |
autodestroy | true (default) | false | 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. |
description | String | 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. |
nl2br | true | false | Automatically convert line breaking character to <br /> if it's set to true, everything keeps original if it's false. |
Available methods
Method | Description |
---|---|
open() | Open the dialog. Usage: dialogInstance.open() |
close() | Close the dialog. Usage: dialogInstance.close() |
getModal() | Return the raw modal, equivalent to $('<div class='modal fade'...></div>') |
getModalDialog() | Return the raw modal dialog. |
getModalContent() | Return the raw modal content. |
getModalHeader() | Return the raw modal header. |
getModalBody() | Return the raw modal body. |
getModalFooter() | Return the raw modal footer. |
getData(key) | Get data entry according to the given key, returns null if no data entry found. |
setData(key, value) | Bind data entry to dialog instance, value can be any types that javascript supports. |
enableButtons(boolean) | Disable all buttons in dialog footer when it's false, enable all when it's true. |
setClosable(boolean) | 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. |
realize() | 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(). |
Go to the project. | Contact me if you can help to improve this example page.
Bootstrap之BootstrapDialog的更多相关文章
- bootstrap dialog对话框,完成操作提示框
1. 依赖文件: bootstrap.js bootstrap-dialog.js bootstrap.css bootstrap-dialog.css 2.代码 BootstrapDialog.co ...
- BootstrapDialog.confirm确认对话框
1. 依赖文件: bootstrap.js bootstrap-dialog.js bootstrap.css bootstrap-dialog.css 2.代码 BootstrapDialog.co ...
- 公共文件模块include
首先新建一个include 把所有引入的文件放入公共文件里 function getBaseURL() { var pathName = window.document.location.pathna ...
- Bootstrap-dialog的使用(续Bootstrap Table)
Bootstrap-dialog实现表格内容的增,删,改. 插件引入:必须先引入jquery和bootstrap和artTemplate. <link rel="stylesheet& ...
- 基于Bootstrap的对话框插件bootstrap-dialog
写在前面: bootstrap本身提供了它自己的模态框,但是感觉并不太友好,当需要在页面点击一个按钮打开一个窗口页面时,使用原有的bootstrap的模态框,会把所有的代码全部写在一个jsp页面,显得 ...
- bootstrapDialog插件集成datatables插件遇到的异常
最近项目中,涉及到很多细分领域的东西,有好些目前还没有详细的方案.这是后话,当前起步阶段,我要把握技术路线,搭建基础架构!其中,有好几个地方都用到模态框(Modal), 虽然Bootstrap框架里面 ...
- bootstrap中弹出窗体dialog的自定义
感谢nakupanda的https://github.com/nakupanda/bootstrap3-dialog 根据需要弹出窗体,但是可以移动,不遮挡下面的内容,所以就修改了源代码,添加了一个属 ...
- BootstrapDialog.show函数底层简化
平台用的全部都是BootStrapDialog的弹窗,然后美工设计了一个统一的样式,每次写的时候,都要对其进行样式重写:写吐了快,所以对BootStrap.底层做了修改: 也就是说,只要你要写的界面包 ...
- select option 下拉多选单选bootstrap插件使用总结2
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Octopus系列之模板快速开发手册
公共代码 html_header_1 <title>${sitename}-${seotitle}</title> <meta http-equiv="Cont ...
- WCF初探-10:WCF客户端调用服务
创建WCF 服务客户端应用程序需要执行下列步骤: 获取服务终结点的服务协定.绑定以及地址信息 使用该信息创建 WCF 客户端 调用操作 关闭该 WCF 客户端对象 WCF客户端调用服务存在以下特点: ...
- css属性选择器
1.E[att] 选择具有attr属性的E元素.2.E[att="val"] 选择具有att属性且属性值等于val的E元素3.E[att~="val"] 选择具 ...
- Selenium - CSS Selector
Selenium - CSS Selector http://www.cnblogs.com/bugua/archive/2012/08/16/2641647.html 昨天我练习了用CSS(即层 ...
- 计算第k个质因数只能为3,5,7的数
英文描述:Design an algorithm to find the kth number such that the only prime factors are 3, 5, and 7 思路: ...
- JS实现表格的增删改
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/T ...
- Objective-C学习笔记-第三天(1)
今天开始用oc写iOS程序,遇到的问题有 1.在不同的类使用类的方法或者访问类的属性的时候(公开的方法或者属性),方法或者属性必须在类头文件中声明. 2.对象类型的声明以及定义需要用*,表明这个是一个 ...
- MySQL文件目录格式及存放位置
了解MYSQL的都知道,在MYSQL中建立任何一张数据表,在其数据目录对应的数据库目录下都有对应表的.frm文件,.frm文件是用来保存每个数据表的元数据(meta)信息,包括表结构的定义等,.frm ...
- node.js笔记
在node环境上面运行js代码,js相当于php,node相当于apache环境 第一步装 node 环境1.从官网下载 dmg 文件安装2.通过命令行安装 需要用到 homebrew(mac上专门用 ...
- Gvim+Emmet.vim 那些事。
转自:http://www.jianshu.com/p/67fa1e2114c5 背景 HTML和CSS的写法相对固定,而且重复的工作特别多,特别是尖括号实在是很烦.使用Emmet至少能帮你节省一半的 ...