Bootstrap警告框（Alert）插件使用方法

更新時間：2017年03月21日 08:53:38 作者：boonyaxnn

這篇文章主要為大家詳細介紹了Bootstrap 警告框（Alert）插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

有以下兩種方式啟用警告框的可取消（dismissal）功能：

1、通過 data 屬性：通過數(shù)據(jù) API（Data API）添加可取消功能，只需要向關(guān)閉按鈕添加 data-dismiss="alert"，就會自動為警告框添加關(guān)閉功能。

2、通過 JavaScript添加可取消功能：

$(".alert").alert()

html代碼

<div class="alert alert-success"> 
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="close" data-dismiss="alert" aria-hidden="true">√</a> 
   <strong>成功！</strong>您的網(wǎng)絡(luò)連接已成功！ 
  </div>

效果圖：

3、下面是一些警告框（Alert）插件中有用的方法：

效果圖

4、下表列出了警告框（Alert）插件中要用到的事件。這些事件可在函數(shù)中當(dāng)鉤子使用。

html代碼

<!DOCTYPE html> 
<html> 
 <head> 
  <title>Bootstrap 警告框（Alert）插件</title> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >  
  <script src="js/jquery.min.js"></script> 
  <script src="js/bootstrap.min.js"></script> 
  <style> 
   body{ 
    font-size:24px; 
     
   } 
  </style> 
 </head> 
 <body> 
  <div class="container"> 
  <h3>警告框（Alert）插件 alert() 方法</h3> 
  <div id="myAlert" class="alert alert-warning"> 
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="close" data-dismiss="alert">×</a> 
   <strong>警告！</strong>您的網(wǎng)絡(luò)連接有問題。 
  </div> 
  <script type="text/javascript"> 
   $(function() { 
   $("div#myAlert").bind('click',function () { 
    alert("警告消息框被關(guān)閉。"); 
    }); 
   }); 
  </script> 
  </div> 
  
 </body> 
</html>

效果圖：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于JavaScript實現(xiàn)的快速排序算法分析
這篇文章主要介紹了基于JavaScript實現(xiàn)的快速排序算法,分析了快速排序的原理并結(jié)合實例形式給出了javascript快速排序的操作步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2017-04-04
Javascript隨機標(biāo)簽云代碼實例
這篇文章主要分享一個Javascript隨機標(biāo)簽云代碼實例,需要的朋友可以參考下。
2016-06-06
微信小程序開發(fā)實現(xiàn)的選項卡(窗口頂部/底部TabBar)頁面切換功能圖文詳解
這篇文章主要介紹了微信小程序開發(fā)實現(xiàn)的選項卡(窗口頂部/底部TabBar)頁面切換功能,結(jié)合圖文與實例形式詳細分析了微信小程序選項卡切換相關(guān)操作實現(xiàn)技巧,需要的朋友可以參考下
2019-05-05
JS結(jié)合WebSocket實現(xiàn)實時雙向通信
WebSocket 是一種在 Web 應(yīng)用程序中實現(xiàn)實時、雙向通信的協(xié)議,在本文中,我們將深入介紹 WebSocket 的原理、用法以及一些實際應(yīng)用場景,x需要的可以參考下
2023-11-11
js混淆加密之jsjiami.v6分析
這篇文章主要為大家介紹了js混淆加密之jsjiami.v6分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
原生javascript+CSS實現(xiàn)輪播圖效果
這篇文章主要為大家詳細介紹了原生javascript+CSS實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
layui實現(xiàn)數(shù)據(jù)表格自定義數(shù)據(jù)項
今天小編就為大家分享一篇layui實現(xiàn)數(shù)據(jù)表格自定義數(shù)據(jù)項，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
webpack配置完熱更新會刷新整個頁面
本文主要介紹了webpack配置完熱更新會刷新整個頁面,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-11-11
打開新窗口關(guān)閉當(dāng)前頁面不彈出關(guān)閉提示js代碼
打開新窗口關(guān)閉當(dāng)前頁面時總是彈出提示框，有沒有辦法避免它的彈出呢，答案是可以的接下來為大家分享一個方法可以解決此問題，感興趣的你可不要錯過了哈，希望可以幫助到你
2013-03-03
javascript數(shù)組去重3種方法的性能測試與比較
面試題中有一題數(shù)組去重，首先想到的是對象存鍵值的方法可是遇到不同類型又能轉(zhuǎn)換成同樣的字符串的就完了接下來為大家介紹下雙重循環(huán)/存鍵值和類型實現(xiàn)去重，感興趣的各位可以參考下哈
2013-03-03