当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Bootstrap BootstrapDialog使用详解

Bootstrap BootstrapDialog使用详解

2019年03月25日  | 移动技术网IT编程  | 我要评论

这里有两种展现方式

写在前面：首先你要引入的库有
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>
        <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>

这种方式简单直观； 但会增加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);
    }
  }]
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网