BootboxJS 為一套小型 JavaScript 函式庫，允許使用 Bootstrap 創建動態化對話框 (modal 元件)，可無需擔心創建、管理或刪除任何必需的 DOM 元素或 JavaScript 事件處理程序。
BootboxJS 官方文件
BootboxJS GitHub
引入 BootboxJS
在 BootboxJS 文件中下載的部份有提到，主要有分為 bootbox.min.js (核心) 與 bootbox.locales.min.js (語系) 二支檔案，如果不用到其他語系的話只要載入 bootbox.min.js (核心) 就好了，如果沒有要分開載的話也可以直接載入 Production, with locales:
1 | https://github.com/makeusabrew/bootbox/releases/download/v5.5.2/bootbox.all.min.js |
使用 BootboxJS 設定
BootboxJS 的 .alert() 與 .confirm() 方法
BootboxJS 主要有 .alert() .confirm() 方法，方法中有對應的簡寫和完整的寫法。
這裡先用 .alert() 方法，使用簡寫加回呼函式，這裡注意是沒有使用 {} 物件導向撰寫。
1 2 3 | bootbox.alert("Your message here…", function(){ /* your callback code */ }) |
.alert() 完整方法，要加上 {} 物件導向撰寫
1 2 3 4 5 6 | bootbox.alert({ size: "small", title: "Your Title", message: "Your message here…", callback: function(){ /* your callback code */ } }) |
BootboxJS 語系設定
語系設定方鋨二選一。
1 2 3 4 | bootbox .setDefaults({ locale: "zh_TW", }) |
1 | bootbox.setLocale("zh_TW"); |
BootboxJS 的特色，bootstrap 相關版本都有對應的版別
在 Dependencies (依賴關係) 文件中可以見到，基於 jQuery 與 Bootstrap 的依賴，針對 bootstrap 支援版號由 1x ~ 4x 對應 BootboxJS 的版號。
BootboxJS GitHub 相關版號
雖然使用繁體中文語系，但使用 bootbox.alert() 的按鈕還是會呈現出 ok 的英文字串，但 .confirm() 確實是繁體中文字串。
BootboxJS 結合 bootstrap 3
支援 bootstrap 3.x，透過基本的指定繁體語系與 bootbox 的 .alert() 與 .confirm() 回呼函式執行二段。
See the Pen BootboxJS for BS3 init use by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
BootboxJS 結合 bootstrap 4
引入同樣的 BootboxJS 版號，透過 bootstrap 4 的 modale 來查看，而 modale 垂直居中是在 bootstrap 4 才有的功能 (bootstrap 4 Vertically centered)
bootboxJS 設定 centerVertical: true, 參數，分別將 .alert() 與 .confirm() 都套入。
See the Pen BootboxJS for BS4 init use by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
Comments are closed.