Bootstrap基本插件學(xué)習(xí)筆記之Alert警告框(20)
和前面的模態(tài)對(duì)話框類似。
0x01 例子
先看一個(gè)簡(jiǎn)單的例子:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>警告框</title> </head> <body> <div class="container"> <div class="page-header"> <h1>警告框</h1> </div> <div class="alert alert-danger fade in "> 警告!服務(wù)器dang了 <a href="#" class="close" data-dismiss="alert">×</a> </div> </div> </body> </html>
效果如下:
0x02 事件
Alert警告框和模態(tài)對(duì)話框類似,也支持JS事件:
(1)close.bs.alert
當(dāng)調(diào)用 close 實(shí)例方法時(shí)立即觸發(fā)該事件:
$('#myalert').bind('close.bs.alert', function () { // 執(zhí)行一些動(dòng)作... })
(2)closed.bs.alert
當(dāng)警告框被關(guān)閉時(shí)觸發(fā)該事件(將等待 CSS 過(guò)渡效果完成):
$('#myalert').bind('closed.bs.alert', function () { // 執(zhí)行一些動(dòng)作... })
看一個(gè)例子:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>警告框</title> </head> <body> <div class="container"> <div class="page-header"> <h1>警告框</h1> </div> <div class="alert alert-danger fade in" id="myAlert"> 警告!服務(wù)器dang了 <a href="#" class="close" data-dismiss="alert">×</a> </div> </div> <script> $(function () { $("#myAlert").bind('closed.bs.alert',function () { alert("警告消息框被關(guān)閉!"); }); }) </script> </body> </html>
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript與css3動(dòng)畫(huà)結(jié)合使用小結(jié)
本文給大家講述的是如何使用javascript結(jié)合CSS動(dòng)畫(huà)來(lái)實(shí)現(xiàn)一些占用資源更少,更優(yōu)化的動(dòng)畫(huà)效果,思路十分巧妙,這里推薦給小伙伴們參考下。2015-03-03javascript中new Array()和var arr=[]用法區(qū)別
給大家分析一下在javascript中數(shù)組函數(shù)new Array()和var arr=[]用法區(qū)別,一起跟著學(xué)習(xí)一下吧。2017-12-12p5.js 畢達(dá)哥拉斯樹(shù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了p5.js 畢達(dá)哥拉斯樹(shù)的實(shí)現(xiàn)代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03JS求1到任意數(shù)之間的所有質(zhì)數(shù)的方法詳解
這篇文章主要介紹了JS求1到任意數(shù)之間的所有質(zhì)數(shù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05為什么JS中eval處理JSON數(shù)據(jù)要加括號(hào)
這篇文章主要介紹了為什么JS中eval處理JSON數(shù)據(jù)要加括號(hào)的相關(guān)資料,需要的朋友可以參考下2015-04-04JavaScript中的宏任務(wù)和微任務(wù)執(zhí)行順序
在?JavaScript?中,宏任務(wù)和微任務(wù)是指在執(zhí)行代碼的過(guò)程中的兩種不同的任務(wù)類型,這篇文章主要介紹了JavaScript中的宏任務(wù)和微任務(wù)執(zhí)行順序,需要的朋友可以參考下2022-12-12localStorage的黑科技-js和css緩存機(jī)制
本文主要介紹了localStorage的黑科技-js和css緩存機(jī)制的相關(guān)知識(shí),具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02JS去掉字符串前后空格、阻止表單提交的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS去掉字符串前后空格、阻止表單提交的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06JS關(guān)鍵字球狀旋轉(zhuǎn)效果的實(shí)例代碼
這篇文章主要介紹了JS關(guān)鍵字球狀旋轉(zhuǎn)效果的實(shí)例代碼。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11