bootstrap 4 在模态中启动模态 (1)

📌 相关文章

📜 bootstrap 4 在模态中启动模态 (1)

📅 最后修改于: 2023-12-03 14:39:33.321000 🧑 作者: Mango

在Bootstrap 4中启动模态框中的模态框

Bootstrap 4中的模态框可以嵌套使用，也就是在一个模态框中打开另一个模态框。这个功能在某些场景下非常实用。但是，由于嵌套的关系，使用起来稍微有一些复杂。

下面，我们通过一个具体的例子，向大家介绍如何在Bootstrap 4中启动模态框中的模态框。

准备工作

在开始之前，我们先来准备一些必要的内容：

引入Bootstrap 的CSS和JS文件。
准备两个按钮：一个用于打开外层模态框，一个用于打开内层模态框。

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Modal</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>

<body>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">打开外层模态框</button>
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">外层模态框</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>在这里放一些内容</p>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">打开内层模态框</button>
          <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">内层模态框</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>在这里放一些内容</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
              </div>
            </div>
          </div><!-- end inner modal -->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div><!-- end outer modal -->
</body>
</html>

代码分析

我们来对以上代码做一个简单的分析：

在外层模态框中放置了一个按钮，用于打开内层模态框。
在外层模态框中，内层模态框只是一个普通的div，没有任何指示信息。这是因为，按照Bootstrap 4的设定，一个外层模态框里面可以放置任何内容，而内层模态框实际上是这个外层模态框中的一部分。
每个模态框都必须有一个唯一的id属性来标识自己，同时需要手动和内层模态框的按钮绑定，这里用的是data-target属性。
在内层模态框中，只需要简单地放置一些内容即可。

运行效果

我们将以上代码复制到一个HTML文件中，并在浏览器中打开，我们就可以看到以下效果：

演示效果

总结

在Bootstrap 4中启动模态框中的模态框实际上是很简单的，只需要对模态框的HTML结构稍微特殊一些即可。在以上代码中，我们成功地嵌套了两层模态框，感兴趣的同学可以尝试嵌套更多层来实现更丰富的交互。