前面的話
在網站中，網頁總是需要和用戶一起做溝通與交流。特別是當用戶操作上下文為用戶提供一些有效的警示框，比如說告訴用戶操作成功、操作錯誤、提示或者警告等。在Bootstrap框架有一個獨立的組件，實現類似的效果，這個組件被稱為警示框。本文將詳細介紹Bootstrap警告框
默認用法
警告框組件通過提供一些靈活的預定義消息，為常見的用戶動作提供反饋消息
將任意文本和一個可選的關閉按鈕組合在一起就能組成一個警告框，.alert 類是必須要設置的，另外還提供了有特殊意義的4個類（例如，.alert-success），代表不同的警告信息
.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } .alert h4 { margin-top: 0; color: inherit; } .alert .alert-link { font-weight: bold; } .alert > p, .alert > ul { margin-bottom: 0; } .alert > p + p { margin-top: 5px; }
警告框沒有默認類，只有基類和修飾類。默認的灰色警告框並沒有多少意義。所以您使用一種有意義的警告類。目前提供了成功、消息、警告和危險
1、成功警示框：告訴用戶操作成功，在“alert”樣式基礎上追加“alert-success”樣式，具體呈現的是背景、邊框和文本都是綠色；
2、信息警示框：給用戶提供提示信息，在“alert”樣式基礎上追加“alert-info”樣式，具體呈現的是背景、邊框和文本都是淺藍色；
3、警告警示框：提示用戶小心操作（提供警告信息），在“alert”樣式基礎上追加“alert-warning”樣式，具體呈現的是背景、邊框、文本都是淺黃色；
4、錯誤警示框：提示用戶操作錯誤，在“alert”樣式基礎上追加“alert-danger”樣式，具體呈現的是背景、邊框和文本都是淺紅色
<div class="alert" role="alert">基類</div> <div class="alert alert-success" role="alert">成功</div> <div class="alert alert-info" role="alert">信息提示</div> <div class="alert alert-warning" role="alert">警告</div> <div class="alert alert-danger" role="alert">錯誤</div>
可關閉
在平時瀏覽網頁的時候，會發現一些警示框帶有關閉按鈕，用戶一點擊關閉按鈕就能自動關閉顯示的警示框（也就是讓警示框隱藏不顯示）。在Bootstrap框架中的警示框也具有這樣的功能
只需要在默認的警示框里面添加一個關閉按鈕。然后進行三個步驟：
1、需要在基本警示框“alert”的基礎上添加“alert-dismissable”樣式。
2、在button標簽中加入class="close"類，實現警示框關閉按鈕的樣式。
3、要確保關閉按鈕元素上設置了自定義屬性：data-dismiss="alert"（因為可關閉警示框需要借助於Javascript來檢測該屬性，從而控制警示框的關閉）
.alert-dismissable { padding-right: 35px; } .alert-dismissable .close { position: relative; top: -2px; right: -21px; color: inherit; }
<div class="alert alert-success alert-dismissable" role="alert"> <button class="close" type="button" data-dismiss="alert">×</button> 恭喜您操作成功！ </div>
【外部關閉】
如果把關閉按鈕放置在警告框的外部，則需要設置data-target為'# + 警告框的id'
這個用法的弊端是按鈕本身無法關閉，因為它已經不在警告框內了
<button type="button" class="btn" data-dismiss="alert" data-target="#test">關閉</button> <div id="test" class="alert alert-success alert-dismissable" role="alert">操作成功</div>
如果想關閉警告框的同時，把按鈕也從DOM中刪除，如果按鈕的class是'btn'，則設置data-target=".btn'則可以把按鈕也刪除
<button type="button" class="btn" data-dismiss="alert" data-target="#test,.btn">關閉</button> <div id="test" class="alert alert-success alert-dismissable" role="alert">操作成功</div>
鏈接
有時可能想在警示框中加入鏈接地址，用來告訴用戶跳到某一個地方或新的頁面。而這個時候又想讓用戶能明顯的看出來這是鏈接地址。在Bootstrap框架中對警示框里的鏈接樣式做了一個高亮顯示處理。為不同類型的警示框內的鏈接進行了加粗處理，並且顏色相應加深
Bootstrap框架是通過給警示框加的鏈接添加一個名為“alert-link”的類名，通過“alert-link”樣式給鏈接提供高亮顯示
.alert .alert-link { font-weight: bold; } .alert-success .alert-link { color: #2b542c; } .alert-info .alert-link { color: #245269; } .alert-warning .alert-link { color: #66512c; } .alert-danger .alert-link { color: #843534; }
<div class="alert alert-success" role="alert">成功 <a href="#" class="alert-link">詳情查看</a></div> <div class="alert alert-info" role="alert">信息提示 <a href="#" class="alert-link">詳情查看</a></div> <div class="alert alert-warning" role="alert">警告 <a href="#" class="alert-link">詳情查看</a></div> <div class="alert alert-danger" role="alert">錯誤 <a href="#" class="alert-link">詳情查看</a></div>
JS觸發
【方法】
$().alert('close')
關閉警告框並從 DOM 中將其刪除
<div class="alert alert-success alert-dismissable" role="alert"> <button class="close" type="button">×</button> 恭喜您操作成功！ </div> <script> $('.close').click(function(){ $('.alert').alert('close'); }); </script>
【事件】
close.bs.alert 當 close 方法被調用后立即觸發此事件。
closed.bs.alert 當警告框被關閉后（也即 CSS 過渡效果完畢之后）立即觸發此事件。
<div class="alert alert-success alert-dismissable fade in" data-dismiss="alert" role="alert"> <button class="close" type="button">×</button> 恭喜您操作成功！ </div> <div id="intro">警告框處於打開狀態</div> <script> $('.alert').on('closed.bs.alert', function () { $('#intro').html('警告框被關閉了') }) </script>
JS源碼
【1】IIFE
使用立即調用函數，防止插件內代碼外泄，從而形成一個閉環，並且只能從jQuery的fn里進行擴展
+function ($) { //使用es5嚴格模式 'use strict'; // }(window.jQuery);
【2】初始設置
//定義選擇器，所有符合該自定義屬性的元素都可以觸發下面的事件 var dismiss = '[data-dismiss="alert"]' var Alert = function (el) { //傳入元素，如果元素內部有dismiss設置的自定義屬性，則click事件會觸發原型上的close方法 $(el).on('click', dismiss, this.close) } //版本號為3.3.7 Alert.VERSION = '3.3.7' //動畫持續時間為150ms Alert.TRANSITION_DURATION = 150
【3】插件核心代碼
Alert.prototype.close = function (e) { //被單擊元素的jQuery對象，臨時賦值，防止this污染 var $this = $(this) //獲取自定義屬性data-target的值 var selector = $this.attr('data-target') //獲取沒有data-target屬性 if (!selector) { //則獲取href屬性的值 selector = $this.attr('href') //IE7瀏覽器特殊處理 selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') } //獲取jQuery對象 var $parent = $(selector === '#' ? [] : selector) //阻止默認行為 if (e) e.preventDefault() //如果該元素不存在 if (!$parent.length) { //存在最近的樣式為'.alert'的祖先元素 $parent = $this.closest('.alert') } //刪除元素前，執行close事件，可以通過自定義綁定來執行定義代碼 $parent.trigger(e = $.Event('close.bs.alert')) //如果回調函數中已經包含阻止默認行為的代碼，則直接返回 if (e.isDefaultPrevented()) return //刪除元素上的in樣式 $parent.removeClass('in') function removeElement() { //觸發closed事件后，刪除該元素 $parent.detach().trigger('closed.bs.alert').remove() } //如果支持動畫，並且設置為fade樣式 $.support.transition && $parent.hasClass('fade') ? //在執行動畫過渡效果后，再刪除元素 $parent .one('bsTransitionEnd', removeElement) .emulateTransitionEnd(Alert.TRANSITION_DURATION) : //否則直接刪除元素 removeElement() }
【4】jQuery插件定義
function Plugin(option) { //根據選擇器，遍歷所有符合規則的元素 return this.each(function () { var $this = $(this) //獲取自定義屬性bs.alert的值 var data = $this.data('bs.alert') //如果值不存在，則將Alert實例設置為bs.alert值 if (!data) $this.data('bs.alert', (data = new Alert(this))) //如果option傳遞了string，則表示要執行某個方法 if (typeof option == 'string') data[option].call($this) }) } var old = $.fn.alert //保留其他庫的$.fn.alert代碼(如果定義的話)，以便在noConflict之后可以繼續使用該老代碼 $.fn.alert = Plugin //重設插件構造器，可以通過該屬性獲取插件的真實類函數 $.fn.alert.Constructor = Alert
【5】防沖突處理
$.fn.alert.noConflict = function () { //恢復以前的舊代碼 $.fn.alert = old //將$.fn.alert.noConflict()設置為Bootstrap的Tab插件 return this }
【6】綁定觸發事件
//為聲明式的HTML綁定單擊事件 //在整個document對象上，檢測是否有自定義屬性data-dismiss="alert" //如果有，則設置單擊的時候，關閉指定的警告框元素 $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)