Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗

让我来给你详细讲解一下如何使用Bootstrap编写一个在当前网页弹出可关闭的对话框。以下是具体的步骤：

版本说明

在编写本文时，Bootstrap 的最新版本为 v5.1.0，所以以下过程中的代码也是基于该版本编写的。

准备工作

在使用 Bootstrap 之前，你需要在你的网页中先引入相关的 CSS 和 JavaScript 文件。本文以 CDN 引入为例：

<!-- 引入 Bootstrap 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">

<!-- 引入 Bootstrap 的 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>

创建对话框

首先，我们需要创建一个触发弹出对话框的按钮。在这个按钮的点击事件中，我们将使用 Bootstrap 提供的 modal 组件弹出对话框。

<!-- 创建一个触发弹出对话框的按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  点我弹出对话框
</button>

<!-- 创建对话框 -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">我的对话框</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        这是一个可以在当前网页中弹出的对话框。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

上面的代码中，我们创建了一个按钮，当用户点击该按钮时，会弹出一个 id 为 myModal 的对话框。对话框的内容分为三个部分：

• 头部：包含对话框的标题和关闭按钮；
• 主体：对话框的主要内容；
• 底部：包含关闭按钮。

修改对话框样式

默认情况下，对话框的样式可能不太符合我们的需求。我们可以通过修改 Bootstrap 提供的样式来使对话框更符合网页的整体风格。

例如，我们想修改对话框的背景颜色和文本颜色，可以添加如下 CSS 规则：

/* 修改对话框的背景颜色和文本颜色 */
.modal-content {
  background-color: #333;
  color: #fff;
}

示例：弹出消息提示框

下面以弹出消息提示框为例，演示如何在网页中使用上述方法弹出可关闭的对话框。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  弹出消息提示框
</button>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">提示</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        操作成功！
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

示例：弹出表单对话框

下面以弹出表单对话框为例，演示如何在网页中使用上述方法弹出可关闭的对话框。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  弹出表单对话框
</button>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">填写表单</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form>
        <div class="modal-body">
          <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">电子邮件地址</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            <div id="emailHelp" class="form-text">我们承诺不会与他人分享您的电子邮件地址。</div>
          </div>
          <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>

上述代码中，我们在对话框中嵌套了一个表单，并添加了一些表单元素，例如 input、label 等。用户填写完成表单后，可以点击提交按钮提交表单。