在各種Web開發過程中，對話框和提示框的處理是很常見的一種界面處理技術，用得好，可以給使用者很好的頁面體驗，Bootstrap開發也一樣，我們往往在頁面新增、編輯、檢視詳細等界面使用彈出對話框層的方式進行顯示資料，删除則可能使用一個提示确認框，如果操作成功，我們可以使用更豐富的提示框來處理，本篇主要對比說明在Bootstrap開發中用到的這些技術要點。
正常的Bootstrap有幾種尺寸的對話框，包括預設狀态的小對話框，中等寬度的對話框，和全尺寸的對話框幾種，Bootstrap的對話框界面非常友好， 當我們使用ESC鍵或者滑鼠單擊其他空白處，則會自動隐藏對話框的。
它們的定義隻是class不同，如下面是預設的小對話框界面代碼：
大概的界面如下所示：
注意上面代碼裡面的對話框樣式代碼，如下：
如果是其他兩個尺寸的資料庫，也隻需要修改這裡即可，如下所示兩種代碼分别是：
以及
我們可以根據界面元素的布局，來決定采用哪個尺寸的對話框層定義，不過他們這幾個對話框的調用方式是一緻的。
打開對話框界面如下所示：
關閉對話框界面如下所示:
一般情況下，我們彈出的對話框就是一個表單，可以執行類似儲存資料的送出操作的，是以需要對表單的資料進行驗證，如果有錯誤，我們可能需要在界面上提醒，是以在頁面初始化的時候，需要初始化表單的驗證規則，下面是我們正常的表單初始化操作。
但是一般這些代碼都會重複很多，是以我們可以封裝函數的方式，重用部分代碼，進而使用更簡潔的處理代碼，但同樣能達到目的。
除了上面的正常對話框，我們還經常碰到一種簡潔的确認對話框，雖然也可以使用上面的代碼來建構一個确認對話框，不過一般情況下不需要這麼麻煩的，可以使用插件bootbox的确認對話框來進行處理。
Bootbox.js是一個小的JavaScript庫，它幫助您在使用bootstrap架構的時候快速的建立一個對話框，也可以幫您建立，管理或删除任何所需的DOM元素或js事件處理程式。
bootbox.js使用三方法設計模仿他們的本地JavaScript一些方法。他們确切的方法簽名是靈活的每個可以采取各種參數定制标簽和指定預設值，但它們通常被稱為一樣：
bootbox.alert(message, callback)
bootbox.prompt(message, callback)
bootbox.confirm(message, callback)
唯一需要的參數是alert是 message; callback是必需的 confirm 和 prompt 調用以确定使用者的響應。甚至當調用警報回調是确定當使用者 駁回對話框由于我們的包裝方法不能不要塊 像他們的母語是有用的：他們是異步而非同步。
這三種方法調用四分之一個公共方法，你也可以使用你自己的自定義對話框建立 ：
使用代碼和界面效果如下所示：
雖然上面的效果非常符合Bootstrap的風格，不過界面略顯單調。上面的效果不是我很喜歡這種風格，我遇到一個看起來更加美觀的效果，如下所示。
上面的界面效果類似的實作代碼如下所示：
一般它的彈出框代碼可以做的很簡單，如下所示。
上面兩種處理，都是利用彈出對話框進行實作的，而且對界面有阻塞的，一般情況下，我們做資訊提示效果，希望它不要影響我們進一步的操作，或者至少提供一個很短的自動消失效果。
那麼這裡我們就來介紹下jNotify插件和toastr插件了。
jNotify提示框，一款優秀的jQuery結果提示框插件。我們在送出表單後，通過Ajax響應背景傳回結果，并在前台顯示傳回資訊，jNotify能非常優雅的顯示操作結果資訊。jNotify是一款基于jQuery的資訊提示插件，它支援操作成功、操作失敗和操作提醒三種資訊提示方式。jNotify浏覽器相容性非常好，支援更改提示内容，支援定位提示框的位置，可配置插件參數。
jNotify的參數詳細配置：
下面是我在腳本類裡面封裝的餓公用方法，用來實作提示效果的顯示的。
這樣我們在使用Ajax的POST方法的時候，我們可以根據不同的需要進行提示。
toastr 是一個Javascript庫用于建立Gnome/Growl風格，非阻塞的頁面消息提醒。，toastr可設定四種通知模式：成功，出錯，警告，提示，而提示視窗的位置，動畫效果都可以通過能數來設定，在官方站可以通過勾選參數來生成JS，非常的友善使用。
它可以分别建立如下幾種效果：警告、危險、成功、提示的對話框資訊，效果如下所示。
它的使用JS代碼如下所示。
這個插件的參數定義說明如下所示。
以上就是我在項目裡面，對對話框及提示框的處理和優化的經驗總結，希望對大家學習改進Web界面有幫助。
如果有興趣，可以繼續參考系列文章：
<a href="http://www.cnblogs.com/wuhuacong/p/4757984.html">基于Metronic的Bootstrap開發架構經驗總結（1）-架構總覽及菜單子產品的處理</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4759564.html">基于Metronic的Bootstrap開發架構經驗總結（2）--清單分頁處理和插件JSTree的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4774396.html">基于Metronic的Bootstrap開發架構經驗總結（5）--Bootstrap檔案上傳插件File Input的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4777720.html">基于Metronic的Bootstrap開發架構經驗總結（7）--資料的導入、導出及附件的檢視處理</a>