Bootstrap警告框(Alert)插件使用方法
有以下兩種方式啟用警告框的可取消(dismissal)功能:
1、通過 data 屬性:通過數(shù)據(jù) API(Data API)添加可取消功能,只需要向關(guān)閉按鈕添加 data-dismiss="alert",就會自動為警告框添加關(guān)閉功能。
<a class="close" data-dismiss="alert" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" aria-hidden="true">×</a>
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獲取不重復(fù)的隨機(jī)數(shù)的方法比較
js永不重復(fù)隨機(jī)數(shù)實(shí)現(xiàn)代碼比較2008-09-09echarts折線圖每段顯示不同的顏色的實(shí)現(xiàn)
本文主要介紹了echarts折線圖每段顯示不同的顏色的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09在一個js文件里遠(yuǎn)程調(diào)用jquery.js會在ie8下的一個奇怪問題
這樣的腳本你在ie8下調(diào)用,在ie8地址欄下按下回車后調(diào)用jquery的對像、方法什么的沒有問題,但是刷新之后就有問題。就是刷新之后無論怎樣你要在地址欄按一下回車。2010-11-11ES6新特性之類(Class)和繼承(Extends)相關(guān)概念與用法分析
這篇文章主要介紹了ES6新特性之類(Class)和繼承(Extends)相關(guān)概念與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了ES6中類(Class)和繼承(Extends)的基本概念、語法、使用方法與注意事項(xiàng),需要的朋友可以參考下2017-05-05JavaScript實(shí)現(xiàn)數(shù)組降維詳解
大家都知道將多維數(shù)組(尤其是二維數(shù)組)轉(zhuǎn)化為一維數(shù)組是業(yè)務(wù)開發(fā)中的常用邏輯,除了使用樸素的循環(huán)轉(zhuǎn)換以外,我們還可以利用Javascript的語言特性和數(shù)據(jù)結(jié)構(gòu)的思想實(shí)現(xiàn)更為簡潔優(yōu)雅的轉(zhuǎn)換。下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)關(guān)于JavaScript如何實(shí)現(xiàn)數(shù)組降維吧。2017-01-01微信小程序基于高德地圖API實(shí)現(xiàn)天氣組件(動態(tài)效果)
這篇文章主要介紹了微信小程序基于高德地圖API實(shí)現(xiàn)天氣組件(動態(tài)效果),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-10-10微信小程序之幾種常見的彈框提示信息實(shí)現(xiàn)詳解
這篇文章主要介紹了微信小程序之幾種常見的彈框提示信息實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07