Ajax-day2（图书管理）-弹框显示和隐藏

Run Freely9372025-09-15 8:21

Bootstrap 弹框

图书管理-Bootsrap 弹框

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

（一）属性控制

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

  1. 引入bootstrap.css 和 bootstrap.js

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

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

一、模板代码

（已引入 bootstrap 的 css 和 js 库）

html 复制代码 
<!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代码：

html 复制代码 
<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 的显示弹框属性

html 复制代码 
<button data-bs-toggle="modal" data-bs-target="CSS选择器">
	显示弹框
</button>

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

（1）显示弹框

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

html 复制代码 
<div class="modal my-box" tabindex="-1">...</div>

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

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

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

（2）关闭弹框

找到"弹框-头部"的右上角关闭按钮，

加入关闭弹框的属性。（模板已经加入啦，我们就不用写啦~）
data-bs-dismiss="modal"

html 复制代码 
      <-- 弹框-头部 -->
      <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"按钮，加入关闭弹框的属性。

（模板也写好啦，我们也不用写啦~）

html 复制代码 
<-- 弹框-底部 -->
<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>

完整代码

html 复制代码 
<!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 控制

javascript 复制代码 
// 创建弹框对象
const modalDom = document.querySelector('CSS选择器')
const modal = new bootstrap.Modal(modalDom)

// 显示弹框
modal.show()

//隐藏弹框
modal.hide()

一、模板代码

html 复制代码 
<!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.创建弹框对象

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

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

javascript 复制代码 
// 编辑姓名->点击->弹框显示
document.querySelector('.edit-btn').addEventListener
('click',() => {

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

// 保存->点击->弹框隐藏
document.querySelector('.save-btn').addEventListener
('click',() => {

  // 隐藏弹框
  modal.hide()
})

3.在显示弹框之前，赋予默认姓名；

在隐藏弹框之前，获取姓名并打印

javascript 复制代码 
  <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>

点击"保存"

控制台输出啦~

相关推荐
泷羽Sec-静安1 天前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
小时前端1 天前
虚拟DOM已死？90%内存节省的Vapor模式正在颠覆前端
前端·html
Keepreal4961 天前
Web Components简介及如何使用
前端·javascript·html
进击的野人1 天前
JavaScript变量声明的前世今生：从var到let/const的演进
javascript
jump6801 天前
TS中 unknown 和 any 的区别
前端
无羡仙1 天前
AI终于‘看见’网页了！Stagewise让UI修改从‘盲调’变‘指哪打哪
前端
柯腾啊1 天前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇1 天前
ts 定义重复对象字段
前端
HashTang1 天前
不用再配服务器了！这套 Next.js + Cloudflare 模板，一个人搞定全栈出海
前端·后端·边缘计算
Cory.眼1 天前
WebRTC入门指南：实时通信零基础
javascript·webrtc·实时通信
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06Burp与其他安全工具联动及代理设置教程07jdk21下载、安装（Windows、Linux、macOS）08Labelme从安装到标注：零基础完整指南09NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南10HTML5 敲击乐：从零搭建交互式前端音乐项目