溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這里有兩種展現方式
寫在前面：首先你要引入的庫有
css : bootstrap.min.css bootstrap-dialog.css
js : jquery-1.11.1.min.js bootstrap.min.js bootstrap-dialog.js
1、通過html代碼顯示
<!-- Button trigger modal 彈出框的觸發器 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal 彈出框的結構 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h5 class="modal-title" id="myModalLabel">Modal title</h5>
</div>
<div class="modal-body">
...
</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>
</div>
</div>
這種方式簡單直觀； 但會增加html的‘重量'，而且不夠靈活，大量使用時不建議使用
2、通過js的方式展現（需要注意的地方我都寫在注釋里了）
（1）最簡單的實現方式：
BootstrapDialog.show({
message: 'Hi Apple!'
});
還有一種更簡單的實現方式：BootstrapDialog.alert('I want banana!'); //異步加載 適合用在方法的最后
（2）buttons
BootstrapDialog.show({
message : "message",
buttons : [{
label : "btn1",
cssClass : "btn-primary" //給按鈕添加類名 可以通過此方式給按鈕添加樣式
},{
label : "btn2",
icon : "glyphicon glyphicon-ban-circle" //通過bootstrap的樣式添加圖標按鈕
},{
label : "btn3",
action : function(dialog){ //給當前按鈕添加點擊事件
dialog.close();
}
}
]
});
（3）操作title、message 可以通過 setTitle 和 setMessage 操作title和message
BootstrapDialog.show({
title : "this is a title!", //title
message : "Document Comtent",
buttons : [{
label : "cancel",
action : function(dialog){
dialog.setTitle("title2"); //操作title
dialog.setMessage("message1"); //操作message
dialog.close();
}
},{
label : "Ok",
action : function(dialog){
dialog.close();
}
}]
})
（4）按鈕熱鍵 （本人認為不常用）
BootstrapDialog.show({
title: 'Button Hotkey',
message: 'Try to press some keys...',
onshow: function(dialog) {
dialog.getButton('button-c').disable(); //通過getButton('id')獲得按鈕
},
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.');
}
}]
})
（5）動態加載message
BootstrapDialog.show({
//message : $("<div></div>").load('content.html') //第一種方式
message : function(content){ //第二種方式
var $message = $("<div></div>");
var loadData = content.getData("contentFile");
$message.load(loadData);
return $message; //一定記得返回值！
},
data : {"contentFile" :"content.html"}
});
（6）控制彈出框右上角的關閉按鈕
BootstrapDialog.show({
message: 'Hi Apple!',
closable: true, //控制彈出框拉右上角是否顯示 ‘x' 默認為true
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(); //總是能關閉彈出框
}
}]
});
（7） 彈出框的尺寸
BootstrapDialog.show({
title: 'More dialog sizes',
message: 'Hi Apple!',
size : BootstrapDialog.SIZE_NORMAL //默認尺寸
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);
}
}]
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
