bootstrap 彈窗默認打開_一款轻量级的Bootstrap 3模态弹窗插件--bootstrap3-dialog
Web开发中，模态弹窗应该是避免不了的事情，提示消息，确认操作等都需要使用到弹窗。那么，如果你在项目开发中使用了bootstrap前端框架呢，弹窗这件事情又如何处理？是用bootstrap官方提供的，还是自己封装？这里给大家推荐一款已经成熟的Bootstrap 3轻量级模态弹窗插件--bootstrap3-dialog。当然，bootstrap3的弹窗插件还有其他的，有兴趣的话，大家可以自己搜索一下。
bootstrap3-dialog虽然轻量，但功能却十分完整。可以满足各种弹窗开发需求，包括：
1.常规提示
BootstrapDialog.alert('I want banana!');
2.自定义参数配置的提示
BootstrapDialog.show({
title: 'Say-hello dialog',
message: 'Hi Apple!'
});
3.修改弹窗标题
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');
}
}]
});
4.修改弹窗内容
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');
}
}]
});
5.动态加载内容
BootstrapDialog.show({
message: $('
});
6.自定义按钮和操作
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();
}
}]
});
7.配置弹窗上按钮的热键
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.');
}
}]
});
8.同时打开多个弹窗
var shortContent = '
Something here.
';var longContent = '';
for(var i = 1; i <= 200; i++) {
longContent += shortContent;
}
BootstrapDialog.show({
title: 'Another long dialog',
message: longContent
});
BootstrapDialog.show({
title: 'Another short dialog',
message: shortContent,
draggable: true
});
BootstrapDialog.show({
title: 'A long dialog',
message: longContent,
draggable: true
});
BootstrapDialog.show({
title: 'A short dialog',
message: shortContent
});
9.自定义弹窗类型(提示，错误，警告)
var types = [BootstrapDialog.TYPE_DEFAULT,
BootstrapDialog.TYPE_INFO,
BootstrapDialog.TYPE_PRIMARY,
BootstrapDialog.TYPE_SUCCESS,
BootstrapDialog.TYPE_WARNING,
BootstrapDialog.TYPE_DANGER];
var buttons = [];
$.each(types, function(index, type) {
buttons.push({
label: type,
cssClass: 'btn-default btn-sm',
action: function(dialog) {
dialog.setType(type);
}
});
});
BootstrapDialog.show({
title: 'Changing dialog type',
message: 'Click buttons below...',
buttons: buttons
});
10.自定义弹窗尺寸
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);
}
}]
});
11.支持拖拽
BootstrapDialog.show({
title: 'Draggable Dialog',
message: 'Try to drag on dialog title to move your dialog.',
draggable: true
});
12.数据绑定
var data1 = 'Apple';
var data2 = 'Orange';
var data3 = ['Banana', 'Pear'];
BootstrapDialog.show({
message: 'Hi Apple!',
data: {
'data1': data1,
'data2': data2,
'data3': data3
},
buttons: [{
label: 'See what you got',
cssClass: 'btn-primary',
action: function(dialogRef){
alert(dialogRef.getData('data1'));
alert(dialogRef.getData('data2'));
alert(dialogRef.getData('data3').join(', '));
}
}]
});
13.确认弹窗并支持回调
BootstrapDialog.confirm('Hi Apple, are you sure?', function(result){
if(result) {
alert('Yup.');
}else {
alert('Nope.');
}
});
关于bootstrap3-dialog弹窗插件的更多操作体验请参考原作者的文档：http://nakupanda.github.io/bootstrap3-dialog/