Bootstrap基本插件學習筆記之Alert警告框(20)
更新時間:2016年12月08日 08:59:17 作者:kikay
這篇文章主要為大家詳細介紹了Bootstrap基本插件學習筆記之ALert警告框的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
和前面的模態(tài)對話框類似。
0x01 例子
先看一個簡單的例子:
<!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 "> 警告!服務器dang了 <a href="#" class="close" data-dismiss="alert">×</a> </div> </div> </body> </html>
效果如下:
0x02 事件
Alert警告框和模態(tài)對話框類似,也支持JS事件:
(1)close.bs.alert
當調用 close 實例方法時立即觸發(fā)該事件:
$('#myalert').bind('close.bs.alert', function () { // 執(zhí)行一些動作... })
(2)closed.bs.alert
當警告框被關閉時觸發(fā)該事件(將等待 CSS 過渡效果完成):
$('#myalert').bind('closed.bs.alert', function () { // 執(zhí)行一些動作... })
看一個例子:
<!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"> 警告!服務器dang了 <a href="#" class="close" data-dismiss="alert">×</a> </div> </div> <script> $(function () { $("#myAlert").bind('closed.bs.alert',function () { alert("警告消息框被關閉!"); }); }) </script> </body> </html>
如果大家還想深入學習,可以點擊這里進行學習,再為大家附3個精彩的專題:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
javascript中new Array()和var arr=[]用法區(qū)別
給大家分析一下在javascript中數組函數new Array()和var arr=[]用法區(qū)別,一起跟著學習一下吧。2017-12-12