Ajax-day2（圖書管理）-彈框顯示和隱藏

Bootstrap 彈框

圖書管理-Bootsrap 彈框
（一）屬性控制
- 一、模板代碼
- 二、彈框模板
- 三、bootsrap 的顯示彈框屬性
- 完整代碼
（二）JS 控制
- 一、模板代碼
- 二、步驟

圖書管理-Bootsrap 彈框

Bootstrap 框架
渲染列表（查）
新增圖書（增）
刪除圖書（刪）
編輯圖書（改）

（一）屬性控制

功能：不離開當前頁面，顯示單獨內容，供用戶操作。

引入bootstrap.css 和 bootstrap.js
準備彈框標簽，確認結構
通過自定義屬性，控制彈框的顯示和隱藏

一、模板代碼

（已引入 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.js2. 準備彈框標簽，確認結構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.js2. 準備彈框標簽，確認結構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').valueconsole.log('模擬把姓名保存到服務器上：',username)// 隱藏彈框modal.hide()})</script>

在這里插入圖片描述

點擊”保存“
在這里插入圖片描述
控制臺輸出啦~

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/923603.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/923603.shtml
英文地址，請注明出處：http://en.pswp.cn/news/923603.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！