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ù)中當鉤子使用。
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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript獲取不重復(fù)的隨機數(shù)的方法比較
js永不重復(fù)隨機數(shù)實現(xiàn)代碼比較2008-09-09在一個js文件里遠程調(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é)合實例形式較為詳細的分析了ES6中類(Class)和繼承(Extends)的基本概念、語法、使用方法與注意事項,需要的朋友可以參考下2017-05-05微信小程序基于高德地圖API實現(xiàn)天氣組件(動態(tài)效果)
這篇文章主要介紹了微信小程序基于高德地圖API實現(xiàn)天氣組件(動態(tài)效果),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-10-10