Skip to content
W3S101

bootstrap_ref_js_modal

Bootstrap JS 模态框

Section titled “Bootstrap JS 模态框”

JS 模态框 (modal.js)

Section titled “JS 模态框 (modal.js)”

模态框（Modal）插件是一个灵活的对话框或弹出窗口，显示在当前页面顶部。它需要 Bootstrap 的 JavaScript（bootstrap.bundle.min.js 或单独的文件，包括 modal.js 及其依赖项，如用于定位的 Popper）。

要了解有关模态框的循序渐进教程，请阅读我们的 Bootstrap 模态框教程。

模态框插件类

Section titled “模态框插件类”
类名描述
.modal模态框的主容器。通常默认隐藏。
.modal-dialog设置模态框的适当宽度和外边距。可与尺寸类结合使用。
.modal-content使用边框、背景颜色等样式化模态框。这是模态框头部、主体和底部的容器。
.modal-header定义模态框头部的样式。通常包含标题和关闭按钮。
.modal-title.modal-header 内模态框标题文本的类。
.btn-close一个通用的关闭按钮，常用于模态框和警告框。
.modal-body定义模态框主体的样式，主要内容放置在此。
.modal-footer定义模态框底部的样式。通常包含操作按钮。
.modal-sm与 .modal-dialog 一起用于小型模态框。
.modal-lg与 .modal-dialog 一起用于大型模态框。
.modal-xl与 .modal-dialog 一起用于超大型模态框。
.modal-fullscreen使模态框跨越整个视口。可以是响应式的（例如 .modal-fullscreen-sm-down）。
.fade为模态框添加淡入和淡出动画效果。

通过 data-bs-* 属性触发模态框

Section titled “通过 data-bs-* 属性触发模态框”

无需编写任何 JavaScript 即可切换模态框。在控制器元素（如按钮）上设置 data-bs-toggle=“modal”，同时设置 data-bs-target=“#myModal” 或 href=“#myModal” 以指定要切换的模态框。

注意：对于 <a> 元素，您可以使用 href=“#modalID” 代替 data-bs-target，但为了 JavaScript 组件的清晰度，通常更推荐使用 data-bs-target。

<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>


<!-- Link to trigger modal -->
<a href="#myModal" data-bs-toggle="modal">Open Modal with Link</a>


<!-- Other element to trigger modal -->
<p data-bs-toggle="modal" data-bs-target="#myModal" style="cursor:pointer; color:blue;">Click here to open Modal</p>


<!-- The Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This is the modal body content.
      </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>

通过 JavaScript 触发

Section titled “通过 JavaScript 触发”

使用 JavaScript 手动启用模态框：

// Get the modal element
var myModalElement = document.getElementById('myModal');


// Create a new modal instance
var myModal = new bootstrap.Modal(myModalElement, {
  keyboard: false // Optional: disable closing with Esc key
});


// To show the modal
// myModal.show();


// To hide the modal
// myModal.hide();


// To toggle the modal
// myModal.toggle();

模态框选项

Section titled “模态框选项”

选项可以通过 data 属性（例如 data-bs-backdrop=“static”）或 JavaScript 传递。对于 data 属性，将选项名称附加到 data-bs-。

名称类型默认值描述
backdropboolean 或字符串 ‘static’true包含一个模态框背景元素。或者，指定 static 表示背景不会在点击时关闭模态框。
keyboardbooleantrue按下 Esc 键时关闭模态框。
focusbooleantrue初始化时将焦点置于模态框上。
showbooleantrue已弃用。请改用 JavaScript 方法 .show()。初始化时显示模态框。（此选项来自旧版 Bootstrap；在 BS5 中，模态框默认隐藏，通过触发器或 JS .show() 显示）。

模态框方法

Section titled “模态框方法”

下表列出了所有可用的模态框方法。它们在模态框实例上调用（例如 myModalInstance.toggle()）。

方法描述
.Modal(options) or new bootstrap.Modal(element, options)将您的内容激活为模态框。接受一个可选的 options 对象。
.toggle()手动切换（显示/隐藏）模态框。在模态框实际显示或隐藏之前返回调用者。
.show()手动打开模态框。在模态框实际显示之前返回调用者。
.hide()手动隐藏模态框。在模态框实际隐藏之前返回调用者。
.handleUpdate()如果模态框在打开时高度发生变化（例如出现滚动条），则手动调整其位置。
.dispose()销毁元素的模态框。（移除事件监听器和 data 属性）。

模态框事件

Section titled “模态框事件”

Bootstrap 的模态框类暴露了一些用于挂钩模态框功能的事件。所有模态框事件都在模态框本身触发（即在 <div class=“modal”> 上触发）。

事件类型描述
show.bs.modal当调用 show 实例方法时，此事件会立即触发。如果是点击触发，被点击的元素可通过事件的 relatedTarget 属性获取。
shown.bs.modal模态框对用户可见时触发此事件（会等待 CSS 过渡完成）。如果是点击触发，被点击的元素可通过事件的 relatedTarget 属性获取。
hide.bs.modal当调用 hide 实例方法时，此事件会立即触发。
hidden.bs.modal模态框完成对用户隐藏时触发此事件（会等待 CSS 过渡完成）。
hidePrevented.bs.modal当模态框显示时，其背景为 static，且点击模态框外部或在 keyboard 选项设置为 false 时按下 Esc 键时，触发此事件。

登录模态框示例

Section titled “登录模态框示例”

以下示例创建一个用于登录表单的模态框。注意使用了 Bootstrap 的表单控件和布局实用类。用户、锁定、眼睛等图标通常使用图标库（例如 Bootstrap Icons、Font Awesome）或 SVG 添加。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Login Modal</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Optional: Add Bootstrap Icons (or another icon library) -->
  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> -->
  <style>
    .modal-header h4 .bi { /* Example for Bootstrap Icons */
        margin-right: 0.5rem;
    }
  </style>
</head>
<body>


<div class="container mt-5">
  <h2>Modal Login Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#loginModal">
    Login
  </button>


  <!-- The Modal -->
  <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="loginModalLabel" style="color: #0d6efd;">
            <!-- Example: <i class="bi bi-lock-fill"></i> Login -->
            Login
          </h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form role="form">
            <div class="mb-3">
              <label for="usrname" class="form-label">
                <!-- Example: <i class="bi bi-person-fill"></i> Username -->
                Username
              </label>
              <input type="email" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="mb-3">
              <label for="psw" class="form-label">
                <!-- Example: <i class="bi bi-eye-fill"></i> Password (use appropriate icon) -->
                Password
              </label>
              <input type="password" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <div class="form-check mb-3">
              <input class="form-check-input" type="checkbox" value="" id="rememberMe" checked>
              <label class="form-check-label" for="rememberMe">
                Remember me
              </label>
            </div>
            <button type="submit" class="btn btn-success w-100">
              <!-- Example: <i class="bi bi-box-arrow-in-right"></i> Login -->
              Login
            </button>
          </form>
        </div>
        <div class="modal-footer justify-content-between">
          <div>
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
              <!-- Example: <i class="bi bi-x-circle"></i> Cancel -->
              Cancel
            </button>
          </div>
          <div>
            <p class="mb-0">Not a member? <a href="#">Sign Up</a></p>
            <p class="mb-0">Forgot <a href="#">Password?</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>