4-3 警告框--使用声明式触发警告框

如果通过自定义的HTML属性（声明式）来触发警告框，需要在关闭按钮上设置自定义属性data-dismiss="alert"，如下所示：

<div class="alert alert-success" role="alert">
    <button class="close"  data-dismiss="alert" type="button" >&times;</button>
    <p>恭喜您操作成功！</p>
</div>

运行效果如下：

点击X会关闭整个警告框。

其实关闭按钮，不一定非要用X号，也可以是普通的按钮元素或者链接元素，只需要保证关闭元素带有自定义属性data-dismiss="alert"即可，如下面示例所示：

<div class="alert alert-warning" role="alert">
    <h4>谨防被骗</h4>
    <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>
    <a href="#" class="btn btn-danger" data-dismiss="alert">关闭</a>
</div>

运行效果如下：

当用户点击“关闭”按钮就可以关闭整个警告框。

前面两个示例，操作关闭按钮时都是先查找 data-target 属性，再查找 href 属性，如果关闭按钮都没有定义这两个属性，就会操作其父元素。也就是说，关闭按钮不在 div.alert 容器内时，只要给关闭元素定义了data-target属性（如果是链接元素还可以通过href属性）,而且属性值与div.alert容器的id一致，关闭元素放在容器外也可以关闭警告框。来看一个简单的示例：

<div class="alert alert-warning" role="alert" id="myAlert">
    <h4>谨防被骗</h4>
    <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>
</div>
<button type="button" data-target="#myAlert" class="btn btn-danger" data-dismiss="alert">关闭</button>

这种方式点击“关闭”按钮也可以关闭警告框，只不过“关闭”按钮自身没办法关闭，会一直显示在那，如下图所示：