---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/6(五) 每日任務
## 題目
請觀看並理解 [Modal 元件](https://bootstrap5.hexschool.com/docs/5.0/components/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 CSS
https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css


載入 Bootstrap JS
https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js

## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答：[Codepen 範例](https://codepen.io/Bingbingboom/pen/bGqrowa) -->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/bGqrowa
-->

<!-- 1. 焦糖
Codepen：
-->

<!-- 2. Alpha
Codepen：https://codepen.io/alphatero/pen/WNjaRJR
-->
<!-- 3. Jasmin
Codepen：https://codepen.io/thejasmin/pen/GRrQVoJ
-->

<!-- 4. Lina Chen
codepen: https://codepen.io/LinaChen/pen/OJmBWZM
-->

<!-- 5. xing
codepen: https://codepen.io/xing10/pen/mdmzRLd
-->

<!-- 6. kevinhes
codepen: https://codepen.io/dwpwdpad/pen/GRmYrdg
-->

<!-- 7. 雷古娜
codepen:https://codepen.io/tinahopo/pen/yLbRgjz -->
<!-- 8. roger
codepen: https://codepen.io/rogerchuang/pen/YzVJNBz-->

<!-- 9. yijun
codepen:
https://codepen.io/sandy3068/pen/rNmqyOQ
-->

<!-- 10. lumei
codepen:
https://codepen.io/l_umei/pen/gOWBmLm
-->

<!-- 11.陳sam
codepen:https://codepen.io/euldpliv/pen/NWjOpjy
-->

<!-- 12.Jean
codepen:https://codepen.io/jean-liu/pen/XWRxMZL
-->
<!-- 13.大衛
https://codepen.io/exnsrpjc/pen/OJmBpqv
-->

<!-- 14. Gui
https://codepen.io/guitimliu/pen/YzVJZoQ -->

<!-- 15. Joy Cheng
https://codepen.io/joycheng5432/pen/JjNmNYb?editors=1000
-->

<!-- 16.黃士桓
https://codepen.io/shr-huan-huang/pen/MWmPmKg
-->

<!-- 17. huanan
https://codepen.io/hua_nan/pen/KKmGmwY
-->

<!-- 18. Gill
codepen:https://codepen.io/Gill-Chin/pen/MWmPmVK
-->

<!--Cheng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/poPLjoG
-->

<!-- 20. 蔡明達
Codepen: https://codepen.io/bmzpfyxe/pen/BaWOzvB?editors=1000
-->

<!-- 21. hellocrab
https://codepen.io/hellocrab/pen/VwbEWaq
-->

<!-- 22. peter.chen
codepen:https://codepen.io/JIAN-RONG/pen/WNjaOGw?editors=1011
-->

<!-- 23.肉鬆
codepen: https://codepen.io/klrkicog/pen/mdmzwMN?editors=1010
-->

<!-- 24.群嘉
codepen:https://codepen.io/efzdamnp-the-lessful/pen/WNjaOyR?editors=1000
-->

<!-- 25. ZOE WU
https://codepen.io/Zoechiueh/pen/gOWBRrV?editors=1000
-->

<!-- 26. 阿熊
codepen: https://codepen.io/hsiungchi/pen/abWRwPQ -->

<!-- 27. Sz
https://codepen.io/szyln/pen/gOWBxwg
-->

<!-- 28. Cate Chang
https://codepen.io/tutz/pen/JjNmyrj
-->

<!-- 29. 沈依蓉
https://codepen.io/lily-oa/pen/bGWmrxM
-->

<!-- 30.阿瓜
https://codepen.io/hoick/pen/KKmGvJb -->

<!--31.童筱涵
https://codepen.io/hsiaohan/pen/qBmJbEe?editors=1010
-->

<!--32. 阿和
codepen:https://codepen.io/shnny/pen/JjNaVEo
-->

<!-- 33. Ruby Chiang
Codepen: https://codepen.io/rubyyl0701/pen/bGWmYOg
-->

<!-- 34. curry
Codepen: https://codepen.io/Ted19851223/pen/BaRqJQZ
-->

<!-- 35. axlrock1021
Codepen: https://codepen.io/andy1021/pen/mdmzxBN
-->

<!-- 36. Hi Annie
https://codepen.io/lhohdalu/pen/bGWmvve
-->

<!-- 40. KatieZhao
https://codepen.io/katiezhao/pen/LYygmvZ -->

<!--41. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/OJmBvKR
-->

<!--42. Tina Yen
codepen:https://codepen.io/tlorfrnl-the-typescripter/pen/bGWmydx
-->

<!--43. Sylvia-H
https://codepen.io/Cosmosheart/pen/mdmzYeq?editors=1000 -->

<!--44. Tori
https://codepen.io/hayen/pen/abWKGZZ?editors=1000
-->

<!--44. Erin Huang
https://codepen.io/ErinHuang/pen/PomxWRY
-->

<!--45. anna
https://codepen.io/annhys/pen/poPQPvG
-->

<!-- 46. Karen Huang
https://codepen.io/Coding_Snorlax/pen/poPQrzW
-->

<!-- 47. WilsonHan
https://codepen.io/wi0821/pen/MWmzrLZ
-->

<!-- 48. Jessie Cheng
https://codepen.io/JessieMosbi/pen/poPQpqO
-->

<!-- 49. Elaine Liu
https://codepen.io/elaine7598/pen/MWmzVee
-->

<!--50. Sihle Huang
code: https://codepen.io/bugbug777/pen/MWmzPBW
-->

<!--51. KK
code: https://codepen.io/potatokaka/pen/GRmwwZP?editors=1000
-->

<!--52. YuriT
code: https://codepen.io/wenfisht/pen/KKmrbOx
-->

<!-- 53.Page
https://codepen.io/kanawin821/pen/ZEKmPre
-->

<!-- 54.Sam li
codepen:https://codepen.io/sam830623/pen/zYwMbWP
-->

<!-- 55.Meng
codepen:https://codepen.io/MGHN/pen/KKmNjoO
-->

<!-- 56.Jim Hwang
codepen:https://codepen.io/jimh1129/pen/ZEKVYvR
-->

<!-- 56.Jim Hwang
codepen:https://codepen.io/_u_jung/pen/oNWJPxJ?editors=1010
-->

<!-- 57.Shani
codepen: https://codepen.io/ShaniMa/pen/jOmXeZQ -->

<!-- 58.Oober
codepen: https://codepen.io/xtsjrjdv/pen/YzVdJdx -->

<!-- 59.Riley
codepen: https://codepen.io/jjpxbprd/pen/BaRvGRb
-->

<!-- 60.佳文
https://codepen.io/chiawen81/pen/WNjPvxM?editors=1010
-->
<!-- 61.una
https://codepen.io/xbsapbas-the-vuer/pen/QWvYNPz?editors=1010
-->

<!-- 62. 魚魚
codepen:https://codepen.io/YuYu_29/pen/JjNxKyJ
-->

<!-- 63. Jun Chan
codepen:https://codepen.io/chujunchan/pen/ZEKwVoa?editors=1100
-->

<!-- 64. Jameskrauser
codepen: https://codepen.io/jameskrauser/pen/yLbZmBO?editors=1000
-->

<!-- 65. 袁祥恩
codepen:
https://codepen.io/ovfxsavp-the-bashful/pen/QWvPJYY?editors=1000
-->

<!-- 66. YOYO
codepen: https://codepen.io/lumedkle/pen/KKmYbWK
-->

<!-- 67. Min Chun Tsai
codepen: https://codepen.io/Tsai0926/pen/gOWyEEe
-->

<!-- 68. Alberto
https://codepen.io/AlbertoLL/pen/oNWRdmq
-->

<!-- 69. Joe Kuo
codepen: https://codepen.io/alertislow/pen/jOmjbbG
-->

<!-- 70. WA
https://codepen.io/ldddl/pen/OJmegYO
-->

<!-- 71. YJ kung
https://codepen.io/bagelover/pen/powoOQZ
-->

<!-- 72. AKI
https://codepen.io/akichen27/pen/wveWMNZ
-->