BootstrapBootstrapDialog使用詳解

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

10余年的澤庫網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。營銷型網(wǎng)站建設的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調(diào)整澤庫建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“澤庫網(wǎng)站設計”,“澤庫網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

寫在前面：首先你要引入的庫有
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 彈出框的結構 -->
<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>
        <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的方式展現(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）控制彈出框右上角的關閉按鈕

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

標題名稱：BootstrapBootstrapDialog使用詳解
網(wǎng)頁鏈接：http://chinadenli.net/article0/jijgoo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、網(wǎng)站收錄、App設計、網(wǎng)站營銷、服務器托管、網(wǎng)站排名

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

BootstrapBootstrapDialog使用詳解