Bootstrap BootstrapDialog使用详解

<!-- 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>        <h4 class="modal-title" id="myModalLabel">Modal title</h4>      </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>

BootstrapDialog.show({  message: 'Hi Apple!'});

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();      }    }  ]});

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();    }  }]})

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.');    }  }]})

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"}});

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();   //总是能关闭弹出框    }  }]});

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);    }  }]});