前端總是會有很多信息提示的時候，最簡單的可以用javascript自帶的alert,confirm等。這些雖然和js的配合很好，但是很丑。
bootstrap給我們提供了一些不同的方案比如modal的模態對話框，popover，tooltip等比較好看的提示框。這些雖然好看一些但是需要和頁面的DOM元素有很強的耦合性，而且編寫起來比較麻煩。
好在一些第三方的插件可以兼顧簡潔和美觀，下面簡單說幾個。
■ toastr 輕型信息提示框
【https://www.cnblogs.com/h--d/p/5732743.html】
效果大概是這個樣子：
彈出的信息有標題/內容，可以添加關閉按鈕，同時可以在指定的幾個位置生成，並且整個消息是半透明的，過一段時間后會自動關閉，伴隨淡入淡出效果。總體而言十分好看。另外toastr的一大特點就是與alert等不同，它是不阻塞頁面的。
首先下載組件，官方網站在【http://codeseven.github.io/toastr/】，注意不用下載右側的zip或者tar包，而是找到左邊對應的min.js和min.css的連接下載即可。
然后還是老方法進行引入，完成之后在我們自己的js中只要簡單的一句就可以構造出相應的提示：
// 提示消息 toastr.info('content','title'); // 成功 toastr.success('content','title'); // 警告 toastr.warning('content','title'); // 錯誤 toastr.error('content','title'); // 優雅關閉所有消息 toastr.clear(); // 瞬間移除所有消息 toastr.remove();
除了簡單的調用之外，還可以進行參數（初始化參數）的設置。可以設置的初始化參數主要有：
positionClass 分成toast-(bottom|top)-(left|right|center)的組合，指出了消息可以出現的幾個位置
closeButton 可選true或false，決定在每個消息右上角是否顯示關閉按鈕
showDuration,hideDuration 單位毫秒，設置淡入/淡出動畫持續時間，默認值為300和1000
timeout 單位毫秒，顯示持續時間
showMethod，hideMethod 默認是fadeIn和fadeOut，用於設置消息出現和消失的動畫的
progressBar 設置true或false，在消息窗口下面添加一個進度條，進度條走完時消息自動消失
設置的方法如下：
toastr.options = {option: value, ...}
也可以單項單項進行設置如：
toastr.options.positionClass = 'xxxxx';
除此之外，對於每次調用也可以添加第三個參數（一個object）用來設置該消息的個性化初始化參數。
需要注意的是設置並不像我們想象得那么靈活，這主要和渲染出來的消息的結構有關。渲染消息時會首先得到一個div，這個div會有一些初始化參數的特征，比如positionClass就是這個div的一個class。然后把當前渲染出的消息加入到這個div中。當這個div中還有消息沒消失（手動關閉或者超時自動消失），那么div始終存在，新要被渲染出來的消息，不論個性的初始化參數或者新設置的初始化參數如何，都會被加入到這個div中，也就是說沿用了創建這個div的那個消息的初始化參數。當這個div中所有消息都消失了，那么再創建消息時就會創建一個新div，自然就會加載那個消息的初始化參數了。
toastr就是這樣，應用起來很方便的一個小插件。
■ sweetalert 警告框的綜合解決方案
alert確實不好看，但是用modal等bootstrap自帶工具來實現alert的功能又比較煩（比如在頁面里要事先埋上一個復雜的div），sweetalert這個組件則能很方便的像alert那樣，讓我們在js中簡單調用一行代碼就實現彈出提示框了。
引入sweetalert。可以將【https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js】和【https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css】內容復制到本地形成本地的靜態文件，也可以通過CDN的方式直接引用。
完成后在js中就可以調用一些方法來彈出提示框了，比如單純的信息展示:
swal('Hello, World'); 簡單彈出一個提示框，自帶一個OK按鈕用於關閉提示框
swal('Title','Content'); 帶有標題的簡單提示框，標題只是一個大一點字號加粗過后放在內容上方，沒有<hr>之類的東西
swal('Succ_Title','Succ_Content','success'); swal的另一個很不錯的自帶功能就是配合bootstrap提供了從info到error各個級別的提示框並且自帶了動態的圖標，很好看。比如這個是成功的提示框，把第三個參數也可以換成info, warning ,error等
內容，標題和類別這三個參數可以這樣匿名按順序寫，如果要指明是哪個參數可以像其他很多組件那樣傳遞一個object作為初始化參數來寫，比如：
swal({title: 'Title', text: 'Content', type: 'success'}) *需注意，似乎不能不設置title只設置text。當一定不要有標題title的時候可以設置為空值。
● 確認提示框
在實際開發過程中，經常會遇到跳出一個提示框請求確認，比如刪除一個什么東西的時候。之前很黑洞的一點就是如果用confirm雖然編程方便但是很丑，如果用modal或者popover，那么如何把第一次點擊時選取的信息（比如要刪除對象的ID，肯定是在第一次點擊時就決定了）傳遞給第二次確認點擊就是一個問題。而swal已經為我們包裝出了這樣一個功能：
$('.del-row').click(function(event){
swal({
title: '警告',
text: '確認刪除ID為' + $(this).find('.id-td').text() + '的行嗎？';
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#xxxxxx',
confirmButtonText: '確認刪除',
closeOnConfirm: false,
showLoaderOnConfirm: true
}, function(){
// 發出ajax請求要求刪除
$.ajax({
url: 'xxx',
type: 'delete',
dataType: 'json',
data: {xxx},
success: function(data){
swal({
text: '刪除成功',
type: 'success'
});
},
error: function(xml,err,excep){
swal({
text: '發生錯誤' + xml.status,
type: 'error'
});
}
})
})
})
可以看到，在初始化參數的object后面我們添加了第二個參數是一個函數對象。當點擊提示框的confirmButton的時候，或者timer時間到提示框自動關閉的時候，會執行這個函數。
另外還有一個小點，就是swal之間的覆蓋。這里的swal設置了closeOnConfirm為false，以為着點擊confirmButton之后這個提示框不會消失，而接下來ajax請求完了之后又新swal出一個提示框，此時可以看到新的提示框會覆蓋掉原來的提示框，點擊新提示框中的OK，就會把提示框關掉，沒有提示框了。同理，如果在一個連續的語境中多次調用swal，最終頁面上顯示出來的swal以最后一次調用時設定的樣子為准。
上面showCancelButton是true，這意味着我們可以點擊取消按鈕進行簡單的提示框關閉。如果在取消的時候也想執行一些代碼的話可以這么干，把第二個參數的函數改造成帶有一個參數：
swal({xxxx},funcion(isConfirm){ if (isConfirm){ // 點擊了確認之后干的事 } else{ // 點擊取消之后干的事 } })
showLoaderOnConfirm則是一個對ajax適配很好的參數，當設置為true后，點擊確認之后取消和確認按鈕會被禁用以防止用戶做出進一步誤操作，然后確認按鈕會展示轉菊花界面。
● 其他一些樣式和參數說明
imageUrl 指出一個url指向一張圖片，可以在提示框中展示一個圖片。需要在注意的是，如果指定type的話，type帶有的那個圖標也是會被展示出來的，在imageUrl指向圖片的上方。
html 當設置為true時，以html的方式解析text中的內容
timer 設置一個自動關閉時間，單位是毫秒
animation 默認值是pop，可以設置為slide-from-top和slide-from-bottom，另外也可以設置為false以禁用動畫
更多的參數可以參考文檔【http://mishengqiang.com/sweetalert/】
● 輸入提示框
類似於prompt，看下這個實例就知道了:
swal({ title: '請輸入', text: '輸入內容:', type: 'input', //type改為input inputType: 'text' // password等也可 showCancelButton: true, closeOnConfirm: false, animation: 'slide-from-top', inputPlaceholder: '輸入的內容寫在這里...', },function(inputValue){ if (inputValue == false){ return false; } if (inputValue === ''){ swal('你需要輸入一些內容'); return false;} swal({
title: '' //不能沒有標題，可以設置空值 text: '收到輸入內容：' + inputValue, type: 'success' }); });
● 方法
swal還提供了幾個方法，比如setDefaults，當你有很多swal要設置同一個屬性時可以用這個方法比如
swal.setDefaults({confirmButtonColor: '#xxxxxx'}) 這樣沒調用一次swal得到的彈出框的確認按鈕就都會是指定顏色了
swal.close() 手動關閉彈窗
swal.showInputError(',,,') type為input時，當得到的值不符合預期可以給出錯誤信息
swal.enableButton/disableButton() 手動啟用、禁用按鈕