快捷導航

Bootstrap BootstrapDialog使用詳解

更新時間：2017年02月17日 08:29:59 作者：二到家的小熊

這篇文章主要為大家詳細介紹了Bootstrap BootstrapDialog使用的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

這里有兩種展現(xiàn)方式

寫在前面：首先你要引入的庫有
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 彈出框的觸發(fā)器 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal 彈出框的結(jié)構(gòu) -->
<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">&times;</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的方式展現(xiàn)（需要注意的地方我都寫在注釋里了）

（1）最簡單的實現(xiàn)方式：

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

還有一種更簡單的實現(xiàn)方式：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）動態(tài)加載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）控制彈出框右上角的關(guān)閉按鈕

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();   //總是能關(guān)閉彈出框
    }
  }]
});

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: