完整教程：Ajax-day2（图书管理）-弹框显示和隐藏

Bootstrap 弹框

图书管理-Bootsrap 弹框

  1. Bootstrap 框架
  2. 渲染列表（查）
  3. 新增图书（增）
  4. 删除图书（删）
  5. 编辑图书（改）

（一）属性控制

功能：不离开当前页面，显示单独内容，供用户操作。

  1. 引入bootstrap.css 和 bootstrap.js

  2. 准备弹框标签，确认结构

  3. 通过自定义属性，控制弹框的显示和隐藏

一、模板代码

（已引入 bootstrap 的 css 和 js 库）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Bootstrap 弹框</title>
            <!-- 引入bootstrap.css -->
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
              </head>
              <body>
                <!--
                目标：使用Bootstrap弹框
                1. 引入bootstrap.css 和 bootstrap.js
                2. 准备弹框标签，确认结构
                3. 通过自定义属性，控制弹框的显示和隐藏
                -->
                  <button type="button" class="btn btn-primary">
                  显示弹框
                </button>
                <!-- 引入bootstrap.js -->
                <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"></script>
                </body>
              </html>

二、弹框模板

Bootstrap Modal：https://www.getbootstrap.cn/docs/5.0/components/modal/

找到弹框模板，并copy代码：

在这里插入图片描述

<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>

可是我们把这一段代码加入后，页面中并没有出现弹框，是什么原因呢？
F12，找到弹框标签，查看样式：
发现 display:none;
在这里插入图片描述

在这里插入图片描述

取消勾选后，弹框出现啦！

bootstrap 的 modal 弹框：添加 model 类名（默认隐藏）

三、bootsrap 的显示弹框属性

<button data-bs-toggle="modal" data-bs-target="CSS选择器">
  显示弹框
</button>
<button data-bs-dismiss="modal">Close</button>

（1）显示弹框
给弹框标签加一个自定义类名“my-box”（就是我们刚刚引入的 bootstrap 弹框模板）

<div class="modal my-box" tabindex="-1">...</div>

显示弹框的效果（给按钮加入显示弹框的属性）：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".my-box">
  显示弹框
</button>

alt+B——点击按钮——弹框出现~

（2）关闭弹框
找到”弹框-头部“的右上角关闭按钮，
加入关闭弹框的属性。（模板已经加入啦，我们就不用写啦~）
data-bs-dismiss="modal"

<-- 弹框-头部 -->
    <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>

找到弹框底部的”Close“按钮，加入关闭弹框的属性。
（模板也写好啦，我们也不用写啦~）

<-- 弹框-底部 -->
    <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>

完整代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Bootstrap 弹框</title>
            <!-- 引入bootstrap.css -->
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
              </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>
                <!-- 弹框标签 -->
                    <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>
                  <!-- 引入bootstrap.js -->
                  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"></script>
                  </body>
                </html>

（二）JS 控制

// 创建弹框对象
const modalDom = document.querySelector('CSS选择器')
const modal = new bootstrap.Modal(modalDom)
// 显示弹框
modal.show()
//隐藏弹框
modal.hide()

一、模板代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Bootstrap 弹框</title>
            <!-- 引入bootstrap.css -->
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
              </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>
                  <!-- 引入bootstrap.js -->
                  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"></script>
                  </body>
                </html>

二、步骤

1.创建弹框对象

<script>
  const modalDom = document.querySelector('.name-box')
  const modal = new bootstrap.Modal(modalDom)
  <
  /script>

2.显示和隐藏弹框（事件监听）

// 编辑姓名->点击->弹框显示
document.querySelector('.edit-btn').addEventListener
('click',() =>
{
// 2.显示弹框
modal.show()
})
// 保存->点击->弹框隐藏
document.querySelector('.save-btn').addEventListener
('click',() =>
{
// 隐藏弹框
modal.hide()
})

3.在显示弹框之前，赋予默认姓名；
在隐藏弹框之前，获取姓名并打印

<script>
  // 1.创建弹框对象
  const modalDom = document.querySelector('.name-box')
  const modal = new bootstrap.Modal(modalDom)
  // 编辑姓名->点击->赋予默认姓名->弹框显示
  document.querySelector('.edit-btn').addEventListener
  ('click',() =>
  {
  document.querySelector('.username').value = '默认姓名'
  // 2.显示弹框
  modal.show()
  })
  // 保存->点击->获取姓名并打印->弹框隐藏
  document.querySelector('.save-btn').addEventListener
  ('click',() =>
  {
  const username = document.querySelector('.username').value
  console.log('模拟把姓名保存到服务器上：',username)
  // 隐藏弹框
  modal.hide()
  })
  <
  /script>

在这里插入图片描述

在这里插入图片描述

点击”保存“
在这里插入图片描述
控制台输出啦~

posted on 2025-09-21 08:34  lxjshuju  阅读(22)  评论(0)    收藏  举报
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3