Bootstrap入門（三十）JS插件7：警告框

?

通過這個插件可以為警告信息添加點擊以及消失的功能。

當使用一個.close按鈕，它必須是第一個子元素.alert-dismissible，并沒有文字內容。

1.實例

首先，引入CSS文件和JS文件

<link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.1.0.min.js" type="text/javascript"></script> <script src="bootstrap.min.js" type="text/javascript"></script>

創建一個容器div，在里面創建一個承載div，class為alert，樣式為alert-info，由于有動態效果，還要有fade in，為了方便使用，添加一個屬于他的id

然后再創建一個關閉按鈕

最后是文本內容

<div class="container"><div class="alert alert-info fade in" id="myalert"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>hello world!</strong></div></div>

效果，點擊之后關閉，而且是有一個動態漸變消失的效果

2。嵌入按鈕

其實里面還可以承載更多東西，比如button按鈕

為了對比，在alert的承載div下面我們在創建一個新的div

添加代碼

<div class="alert alert-info fade in" id="myalert2"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>hello world!</strong><button type="button" class="btn btn-primary">點擊關閉</button></div>

效果：

3.添加JS代碼

有時候我們是想直接關閉這個警告框

可以添加代碼

<script>$("#myalert").alert("close");</script>

效果是打開頁面之后，第一次創建的警告框消失了，只看到第二個

修改一下代碼，用第二個作為實例

$("#myalert2").on("close.bs.alert",function(e){console.log("hello world!");})

打開網頁后，先右鍵，檢查，然后選擇console，在點擊關閉按鈕之后，console界面出現“hello world！”

?

?

轉載于:https://www.cnblogs.com/hnnydxgjj/p/5942368.html

總結

以上是生活随笔為你收集整理的Bootstrap入门（三十）JS插件7：警告框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。