8.8.2 使用JS关闭警告框

发表于 更新于 分类于 ， ， Waline： 本文字数： 1.7k 阅读时长 ≈ 2 分钟

8.8.2 使用JS关闭警告框

Bootstrap为警告框提供了一个alert()方法,该方法有两个用法。

方法 描述
$('警告框选择器').alert() 不传参数的用法,该方法让警告框监听具有data-dismiss="alert"属性的按钮的单击事件,不过如果通过data-*属性进行初始化则无须使用,因此实际上不带参数的alert()方法没有多大的作用。
$('警告框选择器').alert('close') 传入'close'字符串的用法,该方法将会关闭警告框,并从DOM中将其删除。如果为警告框指定了.fade和.in样式,则警告框淡出后才会被删除。
小结:很少使用警告框不传参数的alert()方法,但alert('close')则可用于关闭警告框。

例如如下示例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 关闭警告框 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <!-- class为alert表示这是一个警告框 -->
        <div class="alert alert-danger" role="alert" id="myAlert">
            危险！请注意
        </div>
        <!-- 通过JS关闭警告框 -->
        <button id="bn" type="button" class="btn btn-primary" onclick="$('#myAlert').alert('close')">
            关闭警告框
        </button>
    </div>
</body>

</html>

在该代码中定义了一个警告框,在警告框外定义了一个按钮,该按钮并未使用任何data-*属性来初始化警告框的关闭行为。
而是为按钮的onclick事件绑定了处理代码,在处理代码中调用了警告框的alert('close')方法,该方法将会关闭警告框。因此用户单击页面中关闭按钮时同样可关闭警告框。