Bootstrap警告框（Alert）插件使用方法
有以下兩種方式啟用警告框的可取消（dismissal）功能：
1、通過(guò) data 屬性：通過(guò)數(shù)據(jù) API（Data API）添加可取消功能，只需要向關(guān)閉按鈕添加 data-dismiss="alert"，就會(huì)自動(dòng)為警告框添加關(guān)閉功能。
<a class="close" data-dismiss="alert" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" aria-hidden="true">×</a>
2、通過(guò) 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ò)連接有問(wèn)題。
</div>
<script type="text/javascript">
$(function() {
$("div#myAlert").bind('click',function () {
alert("警告消息框被關(guān)閉。");
});
});
</script>
</div>
</body>
</html>
效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于JavaScript實(shí)現(xiàn)的快速排序算法分析
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)的快速排序算法,分析了快速排序的原理并結(jié)合實(shí)例形式給出了javascript快速排序的操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
Javascript隨機(jī)標(biāo)簽云代碼實(shí)例
這篇文章主要分享一個(gè)Javascript隨機(jī)標(biāo)簽云代碼實(shí)例,需要的朋友可以參考下。2016-06-06
微信小程序開(kāi)發(fā)實(shí)現(xiàn)的選項(xiàng)卡(窗口頂部/底部TabBar)頁(yè)面切換功能圖文詳解
這篇文章主要介紹了微信小程序開(kāi)發(fā)實(shí)現(xiàn)的選項(xiàng)卡(窗口頂部/底部TabBar)頁(yè)面切換功能,結(jié)合圖文與實(shí)例形式詳細(xì)分析了微信小程序選項(xiàng)卡切換相關(guān)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
JS結(jié)合WebSocket實(shí)現(xiàn)實(shí)時(shí)雙向通信
WebSocket 是一種在 Web 應(yīng)用程序中實(shí)現(xiàn)實(shí)時(shí)、雙向通信的協(xié)議,在本文中,我們將深入介紹 WebSocket 的原理、用法以及一些實(shí)際應(yīng)用場(chǎng)景,x需要的可以參考下2023-11-11
這篇文章主要為大家介紹了js混淆加密之jsjiami.v6分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
原生javascript+CSS實(shí)現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了原生javascript+CSS實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
layui實(shí)現(xiàn)數(shù)據(jù)表格自定義數(shù)據(jù)項(xiàng)
今天小編就為大家分享一篇layui實(shí)現(xiàn)數(shù)據(jù)表格自定義數(shù)據(jù)項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
webpack配置完熱更新會(huì)刷新整個(gè)頁(yè)面
本文主要介紹了webpack配置完熱更新會(huì)刷新整個(gè)頁(yè)面,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
打開(kāi)新窗口關(guān)閉當(dāng)前頁(yè)面不彈出關(guān)閉提示js代碼
打開(kāi)新窗口關(guān)閉當(dāng)前頁(yè)面時(shí)總是彈出提示框，有沒(méi)有辦法避免它的彈出呢，答案是可以的接下來(lái)為大家分享一個(gè)方法可以解決此問(wèn)題，感興趣的你可不要錯(cuò)過(guò)了哈，希望可以幫助到你2013-03-03
javascript數(shù)組去重3種方法的性能測(cè)試與比較
面試題中有一題數(shù)組去重，首先想到的是對(duì)象存鍵值的方法可是遇到不同類型又能轉(zhuǎn)換成同樣的字符串的就完了接下來(lái)為大家介紹下雙重循環(huán)/存鍵值和類型實(shí)現(xiàn)去重，感興趣的各位可以參考下哈2013-03-03