- 警告框大多数是系统对用户的提示，用户阅读后可通过关闭和不再提示按钮关闭警告框。多条警告信息可以进行上下轮播。
- 为任意
[data-dismiss="alert"]和[data-target="#elementId"]， 添加 绑定了警告框关闭。 - 当
.alert包含.alert-dismissible和alert-dismissible-text类时显示em关闭按钮,默认em为关闭按钮 - 通过
$(selector).alert()绑定em关闭
实例
这种就是最基础的警告框，可以用在对事件的即时描述情景上面。
这种就是最基础的警告框，可以用在对事件的即时描述情景上面。 不再提示
- 1这种就是最基础的警告框，可以用在对事件的即时描述情景上面。
- 2这种就是最基础的警告框，可以用在对事件的即时描述情景上面。
- 3这种就是最基础的警告框，可以用在对事件的即时描述情景上面。
<div class="alert alert-warning alert-dismissible">
这种就是最基础的警告框，可以用在对事件的即时描述情景上面。
<em data-dismiss="alert"></em>
</div>
<div class="alert alert-danger alert-dismissible-text">
这种就是最基础的警告框，可以用在对事件的即时描述情景上面。
<em data-dismiss="alert">不再提示</em>
</div>
<!-- 带滚动消息 HTML 结构 -->
<div class="alert alert-danger alert-dismissible-text">
<div class="alert-body">
<ul>
<li>1这种就是最基础的警告框，可以用在对事件的即时描述情景上面。</li>
<li>2这种就是最基础的警告框，可以用在对事件的即时描述情景上面。</li>
<li>3这种就是最基础的警告框，可以用在对事件的即时描述情景上面。</li>
</ul>
</div>
<em data-dismiss="alert">不再提示</em>
</div>
- a标签通过设置
data-dismiss="alert"和data-target来绑定触发关闭警告框。如果我们没有设置data-target,将会获取a标签中的hash作为目标警告框。
实例
这种就是最基础的警告框，可以用在对事件的即时描述情景上面。
<div class="alert alert-warning alert-dismissible" id="demo-1">
这种就是最基础的警告框，可以用在对事件的即时描述情景上面。
<em data-dismiss="alert"></em>
</div>
<p class="fn-pt-20">
<a href="#demo-1" data-dismiss="alert" class="btn default small-btn">关闭警告框</a>
</p>
-
alert插件提供了close关闭的方法
实例
这种就是最基础的警告框，可以用在对事件的即时描述情景上面。
// -- 插件接口
function ajax() {
// ajax 异步操作
setTimeout(function() {
$('#demo-2').alert('close');
}, 1500);
}
$('#btn-2').on('click', ajax)
- 为元素添加
close.bp.alert监听警告框事件。
实例
这种就是最基础的警告框，可以用在对事件的即时描述情景上面。
// --- 事件监听
$('#demo-3').on('closed.bp.alert', function(e) {
alert('#'+ e.relatedTarget[0].id + '已关闭');
})
$('#btn-3').on('click', function() {
$('#demo-3').alert('close')
})
- 此处演示点击关闭需要异步请求后台操作 cookie 记住已关闭的方法。
实例
这种就是最基础的警告框，可以用在对事件的即时描述情景上面。
// 异步交互
var handleCookies = function(el, event) {
setTimeout(function(){
// 强制关闭
// $(selector).alert(方法，事件对象，force是否强制执行)
el.alert('close', event, true)
}, 1500)
};
$('#demo-5').on('close.bp.alert', function(e) {
var that = $(this);
// 中断关闭 alert
e.preventDefault();
handleCookies(that, e)
})