---
# System prepended metadata

title: "\U0001F3C5 Day 35"
tags: [網頁切版直播班 - 2022 夏季班]

---

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

## Modal 元件

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


HTML
```htmlembedded=
<!-- 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://i.imgur.com/vftL5i0.png)

<!-- 解答：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)|
