---
# System prepended metadata

title: "\U0001F3C5 Day 30 - Modal 元件實用"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 30 - Modal 元件實用

Modal 互動視窗是網頁中常見的功能，而 Bootstrap 也提供了相關的 Modal 元件讓我們使用，今天我們就要來試著實作一個 Modal 互動視窗。

### 題目
請觀看並理解 [Modal 元件](https://getbootstrap.com/docs/5.3/components/modal/) 的運作原理，只能更改下方 Launch demo modal 的 Button 內容讓這個 Modal 可以順利被開啟（不能更動 Modal 內容）

![image](https://hackmd.io/_uploads/Sk6hWwVExg.png)



**請修改下方 `...` 處**

HTML
```htmlembedded=
<!-- Button trigger modal -->

<!-- data-bs-toggle 是選擇在 Bootstrap 要觸發的行為-->
<!-- data-bs-target 是需要指向的內容-->
<button type="button" class="btn btn-primary mt-1 ms-3" data-bs-toggle=" ... " data-bs-target=" ... ">
  Launch demo modal
</button>

<!-- Modal -->

<!-- 這邊的 id 是上方指向的接受名稱 -->
<div class="modal fade" id=" ... " tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <div class="modal-body">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit error maiores distinctio a eius aspernatur sequi, est eligendi in dolores impedit, voluptatem voluptate dolor rem voluptates dolore officia perferendis. Quisquam!
      </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>
```

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：
https://codepen.io/fhljksmg-the-styleful/pen/zxGmVeR?editors=1000
 -->


回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
|  01  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/yyYJQOX) |
|  02  |  Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/PwPzxPo)|
|  03  |  登登登 |[Codepen](https://codepen.io/Duncanin/pen/gbaMQRp)|
|  04  |  jchunnn |[Codepen](https://codepen.io/jchunnn/pen/LEpZXLa)|
|  05  |  燕 |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/VYvjgdB)|
|  06  |  老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/zxvBejz?editors=1000)|
|  07  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/dPYXarq?editors=1100) |
|  08  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/gbaMEMO)|
|  09  |  7Lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/QwjEoZq?editors=1010) | 
|  10  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/azvZxLz) | 
|  11  |  Jerome  |[Codepen](https://codepen.io/qsc002163/pen/JoYKqGW?editors=1000) 
|  12  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/JoYKwaK?editors=1010)
|  13  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/ZYbONZe) |
|  14  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/yyYaBay?editors=1000) |
|  15  |  Nooooora  |[Codepen](https://codepen.io/Nora-Ch/pen/YPyGKod) |
|  16  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/qEONwZE?editors=1000) |
|  17  |  pastor  |[Codepen](https://codepen.io/peter_hung/pen/GgpjoyE) |
|  18  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/MYajyJw?editors=1000) |
|  19  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/xbwEOxW) |
|  20  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/GgpjraZ) |
|  21  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=wBKzdgR) |
|  22  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/GgpjGww?editors=1100) |
|  23  |  Saika|[CodePen](https://codepen.io/saika4501/pen/GgpjzLP)|
|  24  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/EaVgJMx?editors=1100) |
|  25  |  Hao  |[Codepen](https://codepen.io/Howell/pen/wBKzLPK) | 
|  26  |  suemma  |[Codepen](https://codepen.io/suemma/pen/yyYgYmX?editors=1010) |
|  27  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/YPyNeQN) | 
|  28  |  Katie  |[Codepen](https://codepen.io/Katiekatiehsu/pen/PwPWLVr?editors=1000) |
|  29  |  Marco  |[Codepen](https://codepen.io/MarcoChiu/pen/ogjBRoL) |
|  30  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/ogjWaev?editors=1000) |
|  30  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/RNWZwpK) |
|  31  |  NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/OPyxoWZ?editors=1100)|
|  32  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/OPyzOOy?editors=1000)|
|  33  |  牛奶嘎  |[Codepen](https://codepen.io/Joyce-Niu/pen/raOJyKR) |
|  34  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/dPYmWEV) |
|  35  |  Celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/YPyJvEd) |
|  36  |  Calvin |[Codepen](https://codepen.io/CalvinChang/pen/WbQmZoK)| 
|  37  |  cindy  |[Codepen](https://codepen.io/a50134/pen/KwdjYMK?editors=1100) |
|  38  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/bNENJer?editors=1000) |
|  39  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/XJXvmXj?editors=1010) |




<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen](連結) | -->