1、model-dialog类增加modal-xl、modal-sm、modal-lg，可创建不同大小的模态框，fade类为弹出动画效果。

2、一些属性

data-backdrop：布尔"true"或"false"

如果设置为true，则显示灰色背景，否则不显示灰色背景

data-keyboard：布尔值

设置点击键盘esc键是否隐藏模态框，注意，必须设置tabindex属性，这个值才有效

data-show：布尔值

模态框初始化后是否立即展示

data-remote：路径

如果配置了url，会将内容加载进modal-content中

3、modal模块支持通过js代码来进行相关控制，支持的方法如下：

$('#open').on("click",function(){
//展示模态框
$('#myModal').modal('show');
});

$('#close').on("click",function(){
//隐藏模态框
$('#myModal').modal('hide');
});

$('#exchange').on("click",function(){
//显示或隐藏进行切换
$('#myModal').modal('toggle');
});

$('#setting').on("click",function(){
//对模态框的属性进行设置 传入对象
$('#myModal').modal({
keyboard:false
});
});
 

4、模态框可以添加一些特有的事件回调，示例如下：

$('#myModal').on('show.bs.modal',function(e){
console.log("模态框将要展示触发")
});

$('#myModal').on('shown.bs.modal',function(e){
console.log("模态框已经展示后触发")
});

$('#myModal').on('hide.bs.modal',function(e){
console.log("模态框将要消失触发")
});

$('#myModal').on('hidden.bs.modal',function(e){
console.log("模态框已经消失后触发")
});

$('#myModal').on('loaded.bs.modal',function(e){
console.log("从远端数据源加载数据完成")
});