Bootstrap弹框

Bootstrap弹框

cccs7 Lv5
  2023-07-04 20:01:11 2023-07-04 20:01 Created   2023-07-04 21:25:14 2023-07-04 21:25 Updated      2.3k Words  11 Mins  

实现 控制 Bootstrap 弹框的显示与隐藏

工作原理

  • Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.
    模态是用HTML，CSS和JavaScript构建的。它们位于文档中的其他所有内容上，并从中删除 <body> 滚动，以便模式内容滚动。

  • Clicking on the modal “backdrop” will automatically close the modal.
    单击模态“背景”将自动关闭模态。

  • Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
    引导程序一次仅支持一个模式窗口。不支持嵌套模式，因为我们认为它们是糟糕的用户体验。

  • Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.
    模态使用 position: fixed ，有时对其渲染可能有点讲究。尽可能将模式 HTML 放在顶层位置，以避免其他元素的潜在干扰。在另一个固定元素中嵌套时 .modal ，您可能会遇到问题。

  • Once again, due to position: fixed, there are some caveats with using modals on mobile devices. See our browser support docs for details.
    再一次，由于 position: fixed ，在移动设备上使用模态有一些注意事项。有关详细信息，请参阅我们的浏览器支持文档。

  • Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
    由于 HTML5 如何定义其语义， autofocus HTML 属性在 Bootstrap 模态中不起作用。要达到相同的效果，请使用一些自定义 JavaScript：

    1
    2
    3
    4
    5
    6
    const myModal = document.getElementById('myModal')
    const myInput = document.getElementById('myInput')

    myModal.addEventListener('shown.bs.modal', () => {
      myInput.focus()
    })

Quick Start

前置条件

在使用 bootstrap 组件之前，需要 引入 bootstrap.css 、 bootstrap.js 

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

模态组件

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
下面是一个静态模态示例（意味着它 position 已被 display 覆盖）。包括模式页眉、模式正文（必需的 padding ）和模式页脚（可选）。我们要求尽可能在消除操作中包含模式标头，或提供另一个显式消除操作。

Modal body text goes here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

In the above static example, we use <h5>, to avoid issues with the heading hierarchy in the documentation page. Structurally, however, a modal dialog represents its own separate document/context, so the .modal-title should ideally be an <h1>. If necessary, you can use the font size utilities to control the heading’s appearance. All the following live examples use this approach.
在上面的静态示例中，我们使用 <h5> 来避免文档页面中的标题层次结构出现问题。但是，从结构上讲，模式对话框表示其自己的单独文档/上下文，因此理想情况下 .modal-title 应为 <h1> .如有必要，可以使用字体大小实用程序来控制标题的外观。以下所有实时示例都使用此方法。

使用属性方式控制 Bootstrap 弹框

  1. 什么是 Bootstrap 弹框

    不离开当前的页面，显示单独的内容，供用户操作

    image-20230704200949715

  2. 需求： 使用 Bootstrap modal ，先做一个demo，点击按钮，让 弹框出现，点击 X 和 close 让 弹框隐藏

    image-20230704201053640

如何使用：

  1. 先引入 bootstrap.css 和 bootstrap.js 到自己的网页

  2. 准备 modal 标签，确认结构（可以从 Bootstrap 官方文档的 modal 里直接复制基础的案例） - 运行到网页后，逐一对应标签和 modal 每个部分对应关系

  3. 通过自定义属性，通知 modal 的显示和隐藏，语法如下

    1
    2
    3
    4
    5
    <button data-bs-toggle="modal" data-bs-target="css选择器">
      显示弹框
    </button>

    <button data-bs-dismiss="modal">Close</button>

属性相关

  • data-bs-toggle 、 data-bs-target 实现控制 弹框的 显示
  • data-bs-dismiss 实现关闭标签所在的提示框

demo


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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
    />
  </head>
  <body>
    <!-- 
    目标：使用Bootstrap弹框
    1. 引入bootstrap.css 和 bootstrap.js
    2. 准备弹框标签，确认结构
    3. 通过自定义属性，控制弹框的显示和隐藏
   -->
    <button
      type="button"
      class="btn btn-primary"
      data-bs-toggle="modal"
      data-bs-target=".my-box"
    >
      显示弹框
    </button>

    <!-- 
    弹框标签
    bootstrap的modal弹框，添加modal类名（默认隐藏）
   -->
    <div class="modal my-box" tabindex="-1">
      <div class="modal-dialog">
        <!-- 弹框-内容 -->
        <div class="modal-content">
          <!-- 弹框-头部 -->
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <!-- 弹框-身体 -->
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <!-- 弹框-底部 -->
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
  </body>
</html>

使用 js 方式控制 bootstrap 弹框

  • 为什么需要 JS 方式 控制 bootstrap 弹框的显示与隐藏

    • 当我显示之前、隐藏之前，需要执行一些逻辑、业务、代码，就需要 引入 js 控制弹框显示与隐藏的方式了

  • 语法如下：

    • ```js
      // 创建弹框对象
      const modalDom = document.querySelector(‘css选择器’)
      const modal = new bootstrap.Modal(modelDom)

      // 显示弹框
      modal.show()
      // 隐藏弹框
      modal.hide()

      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
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81



      ### demo

      ```html
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>Document</title>
          <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
          />
        </head>
        <body>
          <!-- 
          目标：使用JS控制弹框，显示和隐藏
          1. 创建弹框对象
          2. 调用弹框对象内置方法
            .show() 显示
            .hide() 隐藏
         -->
          <button type="button" class="btn btn-primary edit-btn">编辑姓名</button>

          <div class="modal name-box" tabindex="-1">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">请输入姓名</h5>
                  <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                  ></button>
                </div>
                <div class="modal-body">
                  <form action="">
                    <span>姓名：</span>
                    <input type="text" class="username" />
                  </form>
                </div>
                <div class="modal-footer">
                  <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                  >
                    取消
                  </button>
                  <button type="button" class="btn btn-primary save-btn">保存</button>
                </div>
              </div>
            </div>
          </div>
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
          <script>
            // 创建 弹框对象
            const modalDom = document.querySelector(".name-box");
            const modal = new bootstrap.Modal(modalDom);

            // 编辑姓名->点击->赋予默认姓名->弹框显示
            document.querySelector(".edit-btn").addEventListener("click", () => {
              document.querySelector(".username").value = "cccs7";

              // 显示 弹框
              modal.show();
            });

            // 保存->点击->->获取姓名打印->弹框隐藏
            document.querySelector(".save-btn").addEventListener("click", () => {
              const username = document.querySelector(".username").value;
              console.log(username);
              modal.hide();
            });
          </script>
        </body>
      </html>

什么时候用属性控制，什么时候用 JS 控制 Bootstrap 弹框的显示/隐藏?

直接出现/隐藏用属性方式控制，如果需要先执行一段 JS 逻辑再显示/隐藏就用 JS 方式控制

  • Title: Bootstrap弹框
  • Author: cccs7
  • Created at: 2023-07-04 20:01:11
  • Updated at: 2023-07-04 21:25:14
  • Link: https://blog.cccs7.icu/2023/07/04/Bootstrap弹框的使用/
  • License: This work is licensed under CC BY-NC-SA 4.0.
 Comments
On this page
Bootstrap弹框
  1. 工作原理
  2. Quick Start
    1. 前置条件
    2. 模态组件
      1. Modal title
  • 使用属性方式控制 Bootstrap 弹框
    1. 属性相关
    2. demo
  • 使用 js 方式控制 bootstrap 弹框