---
tags: 大學生體驗營 - 2021 夏季班
---
# 7/23(五) 每日任務

## 題目

請觀看並理解 [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://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.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：https://codepen.io/yen-kg/pen/LYWawJx
-->

<!-- 2. 小羊
Codepen：https://codepen.io/eqsmebaz-the-selector/pen/qBmPeMd
-->

<!-- 3. 羿宣
Codepen：https://codepen.io/Ann828/pen/mdmBNGW?editors=1010~~~~ -->

<!-- 4. JT
Codepen: https://codepen.io/jsht-the-animator/pen/mdmqbJB -->

<!-- 5.Cloudia
Codepen: https://codepen.io/hkps87/pen/eYWeOmq -->

<!-- 6. Jack
CodePen: https://codepen.io/JackChen89/pen/ExmbYVj -->

<!-- 7.黃彩雲
Codepen: https://codepen.io/corin19/pen/KKmyPpJ -->

<!-- 8. 辰
Codepen: https://codepen.io/dnangelapril/pen/OJmOLPv
-->

<!--9.廖奕慈
Codepen: https://codepen.io/yiciLiao/pen/VwbrZeb?editors=1000 -->

<!-- 10.蕭絜云
Codepen: https://codepen.io/cloudy_77/pen/mdmqboG -->

<!-- 11. 馮旻
Codepen: https://codepen.io/tboqkvhk/pen/rNmYBgW-->

<!-- 12. 廖仕雅
CodePen: https://codepen.io/sophia0121/pen/abWVorw?editors=1100 -->

<!-- 13. Genie
CodePen: https://codepen.io/hcliii/pen/dyWZyKa -->

<!-- 14. 小胖
Codepen: https://codepen.io/a1073315/pen/NWjwWLr -->

<!-- 15. 人中
Codepen: https://codepen.io/renchong2424/pen/ZEKaEZr -->

<!-- 16. Steve
Codepen:https://codepen.io/steve5631/pen/YzVEPpX
-->

<!-- 17. 黃郁芳
Codepen: https://codepen.io/YuFang0323/pen/eYWemRP -->

<!--18. 小松
Codepen：https://codepen.io/120061203/pen/GRmOJGB
-->

<!-- 19. 莊承叡
Codepen：https://codepen.io/Ray_ty39/pen/NWjwqZQ?editors=1000
-->

<!-- 20. 霈楹
Codepen：https://codepen.io/nrweahgl-the-selector/pen/LYyOGjP
-->

<!-- 21. Iris
Codepen： https://codepen.io/hungyen/pen/ZEKaWQd
-->

<!-- 22. 薰
Codepen: https://codepen.io/chiaoshin/pen/XWRzmBZ -->

<!-- 23. 黃珮雯
Codepen: https://codepen.io/pwh_27/pen/dyWZpyB -->

<!-- 24. 謝旻臻
Codepen: https://codepen.io/julia20010828/pen/NWjwpmY?editors=1010 -->

<!-- 25. 陳方云
Codepen: https://codepen.io/ssnnny/pen/vYmWYVq -->

<!-- 26. 姚小芸
Codepen: https://codepen.io/crazzyamy/pen/OJmOqVd?editors=1100-->

<!-- 27. 劉子瑜
Codepen: https://codepen.io/superfish195/pen/vYmpexg -->

<!-- 28. 德德
Codepen: https://codepen.io/Chiouder/pen/ExmQeWQ -->

<!-- 30. 陳書妤
Codepen: https://codepen.io/shuyu227/pen/yLbEpbL?editors=1000 -->