---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 35

## Modal 元件

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

HTML

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="openMe" 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">
        ...
      </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 繳交 （載入 [Bootstrap CDN](https://bootstrap5.hexschool.com/docs/5.1/getting-started/introduction/#css)）
> CSS、JS 都需載入

## 回報流程

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


<!-- 解答：https://codepen.io/hexschool/pen/LYdzOaO -->

回報區
---

| Discord | CodePen / 答案 |
|:---------------:|:-----------------------------------------------------------------------------:|
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/zYWjVrE) |
| Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/OJvEzPX) |
| Clara Cai#7097 | [CodePen](https://codepen.io/Clara-Snowy/pen/vYRrPqo) |
| CloThEs#7837 | [CodePen](https://codepen.io/CloThEsZ/pen/JjLajVv) |
| SASIMI#5099 | [Codepen](https://codepen.io/sashimi1327/pen/oNqPWQY) |
| 布魯諾#7239 | [Codepen](https://codepen.io/bruno-yu/pen/vYRzWwQ?editors=1010) |
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/eYMLeqW) |
| Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/gOejXGE?editors=1010) |
| JackC#0411 | [Codepen](https://codepen.io/key0329/pen/poLOpJN) |
| 大衛#4869 | [Codepen](https://codepen.io/exnsrpjc/pen/eYMLyOW?editors=1000) |
| LinaChen#1796 | [Codepen](https://codepen.io/LinaChen/pen/jOzvYMV) |
| JarDar#6980 | [codepen](https://codepen.io/jardarpen/pen/bGvxawE) |
| Yuna Huang#2692 | [codepen](https://codepen.io/Yuna1002/pen/qBoMprJ) |
| PeggyLiao#1552 | [CodePen](https://codepen.io/PeiJu-Liao/pen/vYRzpZq?editors=1000) |
| L0F0#8733 | [codepen](https://codepen.io/l0f0/pen/RwMYxRm?editors=1000) |
| Karol-Kuo#5287 | [codepen](https://codepen.io/ting-yu-kuo/pen/PoRdEaZ) |
| yuyu#6310 | [codepen](https://codepen.io/yuyu0905/pen/LYdJegv?editors=1000) |
| LHchien33#6232 | [codepen](https://codepen.io/lin_chien/pen/XWEPVyP?editors=1000) |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/vYRzdBN?editors=1100) |
| YI#0863 | [CodePen](https://codepen.io/YI0305/pen/LYdJQjp) |
| 黑白兔#0684 | [CodePen](https://codepen.io/johnny329/pen/rNdZJmR) |
| int#7518 | [Codepen](https://codepen.io/intHuang/pen/MWVqQOL?editors=1000) |
| zera#6060 | [codepen](https://codepen.io/zera-tseng/pen/zYWJRJY) |
| Potatolee#7749 | [codepen](https://codepen.io/potatoleee/pen/YzaOeRZ) |
| Vera#5592 | [codepen](https://codepen.io/skvera/pen/bGvxLPx) |
| christina#6185 | [codepen](https://codepen.io/chrisc0210/pen/MWVqVKW) |
| Hsiu#8767 | [codepen](https://codepen.io/amy-hsiu/pen/OJvovXo) |
| 威0#6919 | [Codepen](https://codepen.io/n0918679182/pen/KKoxoqP?editors=1000) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/bGvxvrJ) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/zYWJWEo) |
| Benson#6763 | [CodePen](https://codepen.io/kumashow/pen/vYRzRdr) |
| 小諾#1866 | [CodePen](https://codepen.io/noichan/pen/mdxGLRZ) |
| kevin8349 #6131 | [CodePen](https://codepen.io/kun8349/pen/ZExMxge?editors=1010) |
| yo_yo#2678 | [CodePen](https://codepen.io/djmliogn-the-flexboxer/pen/jOzvzjW?editors=1010) |
| 雷雷#7844 | [CodePen](https://codepen.io/lei-yi-jie/pen/eYMLrKM) |
| azami#5986 | [CodePen](https://codepen.io/azami/pen/poLOKEK) |
| Tuhacrt#0008 | [Codepen](https://codepen.io/Tuhacrt/pen/ExEeRqV) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/YzaOjNY) |
| Melon#0380 | [Codepen](https://codepen.io/BalaFang/pen/OJvowbB) |
|鉦勝 #8333|[Codepen](https://codepen.io/atckmax823/pen/dymqjzZ) |
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/bGvxxrp)
|我是泇吟#5189|[CodePen](https://codepen.io/kljuqbxs/pen/xxWaxMY)|
|Joyce#3790|[CodePen](https://codepen.io/joycehuang/pen/QWmVVVv)|
| Yunei#6323 |[CodePen](https://codepen.io/Yunei/pen/OJvooGR)|
| bonnieli1414#4906 |[CodePen](https://codepen.io/bonnieli1414/pen/bGvxveO?editors=1010)|
| ssozr#4680 |[codepen](https://codepen.io/ssozr/pen/MWVqZVE)|
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/YzaOOmP)
| YU #0618 |[Codepen](https://codepen.io/yoken_/pen/NWYLoEz)|
| 咻蹦#1526 |[CodePen](https://codepen.io/emmasyu/pen/LYdJvWg)|
|yu魚#1330 | [CodePen](https://codepen.io/Yu_yu/pen/ZExMgYL)|
|Pony#6778|[Codepen](https://codepen.io/Pony0303/pen/eYMPJdR)|
|IreneY #0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/yLKRMaV)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/zYWmZLj)|
|RayChen#6088|[Codepen](https://codepen.io/raychen1996/pen/PoRymLJ)|
|Clara#1275|[Codepen](https://codepen.io/bsupixqu/pen/yLKRXOW)|
|𝓛𝓊𝒸𝓎#8635|[Codepen](https://codepen.io/lucygirl/pen/JjLmMvB)|
|QOO#8446|[Codepen](https://codepen.io/QOOQOOQ/pen/wvmYYby)|
|阿蘇#8531|[Codepen](https://codepen.io/susu8327/pen/PoRyxoO?editors=1010)|
|Tori#1248|[Codepen](https://codepen.io/FlyTori/pen/VwXEVzW)|
|艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/ExEdaPb)|
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/VwXEJgy) |
|choubree#4350|[Codepen](https://codepen.io/BreeChou/pen/dymQNYX?editors=1010)|
|郭芙蘭#6374|[Codepen](https://codepen.io/flora_Kuo/pen/BarGpbG)|
|Fang#4680 |[Codepen](https://codepen.io/std95174/pen/eYMQQjO)|
|紙飛機 #1335|[Codepen](https://codepen.io/paperplanea/pen/VwXVVRz?editors=1010)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/wvmQOem)|
|NeilLin#3009|[Codepen](https://codepen.io/a0071421/pen/BarGEaG?editors=1010)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/mdxvmNJ)|
|allen#0876|[Codepen](https://codepen.io/sodarman/pen/abYXQJM?editors=1010)|
| J_u_d_y#5993 |[Codepen](https://codepen.io/J_u_d_y/pen/zYWeVGL?editors=1100) |
| Rena#6249 |[Codepen](https://codepen.io/aureate0116/pen/gOeEmYR?editors=1100) |
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/QWmoOQq)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/eYMoEqY?editors=1000)|
|mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/GRxLxwp)|
|toshow#5609|[CodePen](https://codepen.io/toshow/pen/zYWXgOM)|
|Nini Chen#5790|[CodePen](https://codepen.io/ninistyle/pen/LYdoPZW?editors=1000)|
|Van.CS|[Codepen](https://codepen.io/fbacojji-the-selector/pen/LYdoQMz)|
|yuchenye#6119|[Codepen](https://codepen.io/yuchen/pen/GRxbEvz)|
|jin.huang#4666|[Codepen](https://codepen.io/haha1196/pen/xxWoMrG)|
|Jamie Wu#9345|[Codepen](https://codepen.io/Wu220103/pen/MWVMNeE)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/jOzgZpQ?editors=1000)|
|Deborah#0033|[Codepen](https://codepen.io/deborah-tsai/pen/vYRoRWr)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/OJZygmR)|
|NathanJames#8120|[Codepen](https://codepen.io/ufo060204/pen/rNvOoWE)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/oNdzGzj?editors=1010)|