8.8 警告框 8.8.1 使用data-属性关闭警告框

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

8.8 警告框

前一章已经介绍了警告框的基本用法,本章不仅会介绍它的用法,并且会更系统地介绍警告框的各种激发机制。

8.8.1 使用data-*属性关闭警告框

前一章已经讲过:

  • 当关闭按钮位于警告框内部时,只要为该按钮指定了data-dismiss="alert"属性,当用户单击该按钮时,警告框就会随之关闭。
  • 当关闭按钮不在警告框之内时,除了要指定data-dismiss="alert"属性之外,还要指定data-target属性,data-target属性指定该按钮用于关闭哪个警告框。

程序示例

如下代码所示。

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
29
<!DOCTYPE html>
<html>

<head>
    <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>
        <!-- 关闭按钮位于警告框之外时: -->
        <!-- data-dismiss="alert"表示该按钮可以关闭警告框 -->
        <!-- data-target="#myAlert"指定要关闭哪个警告框 -->
        <button type="button" class="btn btn-primary" data-dismiss="alert" data-target="#myAlert">
            关闭警告框
        </button>
    </div>
</body>

</html>

在该代码中定义的按钮不在警告框内,所以要:

  • 为按钮指定了data-dismiss="alert"属性,这意味着该按钮时用于关闭警告框。
  • 在按钮上指定data-target="#myAlert"属性,这意味着该按钮用于关闭id为myAlert的警告框。