---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/12(四) 每日任務

## 題目
實作第六週版型的 fixed Modal
（範例使用 [Bootstrap Modal](https://getbootstrap.com/docs/5.0/components/modal/)模板修改）


HTML

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

<!-- Modal -->
<!-- 新增 .right -->
<div class="modal right fade modal-dialog modal-dialog-scrollable" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Cart List</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-primary">前往結帳</button>
      </div>
    </div>
  </div>
</div>

CSS

.modal.right .modal-dialog {
  position: ...;
  top: ...;
  right: ...;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: translate3d(0%, 0, 0);
}

.modal.right .modal-content {
  height: 100%;
  overflow-y: ...;
}
.modal {
  &-content {
    border-radius: 0;
    border: none;
  }
  &-header {
    border-bottom: none;
  }
  &-body{
    .card{
      max-width: 540px;
    }
  }
  &-footer {
    border-top: none;
  }
}

需透過 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/hexschool/pen/ExWdVmg?editors=1100) -->

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

<!-- 1.

-->

<!-- 2.肉鬆
codepen: https://codepen.io/klrkicog/pen/OJmdBEx
-->

<!--3.Alpha
codepen:https://codepen.io/alphatero/pen/NWjoOOM
-->

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

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

<!-- 6. 雷古娜
https://codepen.io/tinahopo/pen/xxdMyBw -->

<!-- 7. Vic
https://codepen.io/hsuan333/pen/XWROybJ
-->

<!-- 8. kevinhes
codepen: https://codepen.io/kevinhes/pen/rNmPQNN
-->

<!-- 9.Lina Chen
codepen: https://codepen.io/LinaChen/pen/YzVBRXQ
-->

<!-- 10. 大衛
codepen:https://codepen.io/exnsrpjc/pen/GRmzwgy?editors=1100
-->

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

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

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

<!-- 14.Cate Chang
codepen: https://codepen.io/tutz/pen/rNmPQzx
--->

<!-- 15. huanan
codepen: https://codepen.io/hua_nan/pen/NWjoEaJ
--->

<!-- 16. Joy Cheng
codpen: https://codepen.io/joycheng5432/pen/qBmgQjm?editors=1100
-->

<!-- 17. Gui
https://codepen.io/guitimliu/pen/XWROyBN -->

<!-- 18. Gill
codpen:https://codepen.io/Gill-Chin/pen/QWvYJxe?editors=1100
-->

<!-- 19. Tori
codpen: https://codepen.io/hayen/pen/PomxyRa?editors=0100
-->

<!-- 20. Elaine Liu
https://codepen.io/elaine7598/pen/bGWzQxy?editors=1100
-->

<!-- 21. hellocrab
https://codepen.io/hellocrab/pen/xxdMMzx
-->
<!-- 22. 群嘉
codpen:https://codepen.io/efzdamnp-the-lessful/pen/qBmggVB
-->

<!-- 23. 蔡明達
Codepen: https://codepen.io/bmzpfyxe/pen/jOBXRGN
-->

<!-- 24. KK
Codepen: https://codepen.io/potatokaka/pen/GRmzPZL?editors=1100
-->

<!-- 24. YuriT
Codepen: https://codepen.io/wenfisht/pen/ZEKwPpE
-->

<!-- 26. 魚魚
Codepen: https://codepen.io/YuYu_29/pen/vYmbPWd
-->

<!-- 27. Jean
Codepen: https://codepen.io/jean-liu/pen/JjNxmBd
-->

<!-- 28.ylla moon
codepen:
https://codepen.io/pwbzvqja/pen/gOWqqoW
-->

<!-- 29.curry
codepen:
https://codepen.io/Ted19851223/pen/zYweQZb
-->

<!-- 30. 阿和
codepen:https://codepen.io/shnny/pen/mdmvYmr?editors=1100
-->

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

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

<!--33. Tina Yen
codepen: https://codepen.io/tlorfrnl-the-typescripter/pen/gOWEYvm?editors=1100
-->

<!-- 34.Hi Annie
https://codepen.io/lhohdalu/pen/gOWEbjO
-->

<!-- 35. Jessie Cheng
https://codepen.io/JessieMosbi/pen/BaRbygz
-->

<!-- 36. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/LYyaVpK
-->

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

<!-- 38.Sec
https://codepen.io/Sentiments/pen/RwVdaga?editors=1100
-->

<!-- 39. Erin Huang
https://codepen.io/ErinHuang/pen/QWvovdq
-->

<!-- 40. axlrock1021
https://codepen.io/andy1021/pen/jOmJLOE
-->

<!-- 41. peter.chen
https://codepen.io/JIAN-RONG/pen/LYyaOQy?editors=1000
-->
<!-- 42. ellie
https://codepen.io/hsu-yu/pen/VwbRyNN
-->

<!-- 43. WilsonHan
https://codepen.io/wi0821/pen/abWMqNP
-->

<!--44. jimmyFang
https://codepen.io/pohxiqqo/pen/abWMYzz?editors=1100
-->

<!-- 50. 文文
https://codepen.io/chiawen81/pen/PomLKrP
-->

<!-- 51. Una
https://codepen.io/xbsapbas-the-vuer/pen/jOmJKma?editors=1100
-->

<!--52. Sihle Huang
code:https://codepen.io/bugbug777/pen/qBmvJKW
-->

<!--53. Jim Hwang
code:https://codepen.io/jimh1129/pen/WNjmaKd
-->

<!--54. anna
code:https://codepen.io/annhys/pen/ZEKPmwb
-->

<!--55. Oober
code:https://codepen.io/xtsjrjdv/pen/ZEKZWbv
-->

<!--56. ZOE WU
https://codepen.io/Zoechiueh/pen/vYmMGQL?editors=1100
-->

<!--57. Sihle Huang
code: https://codepen.io/bugbug777/pen/wvdZRYw
-->
<!--58. 袁祥恩
https://codepen.io/ovfxsavp-the-bashful/pen/GRmLPPL?editors=1000
-->

<!--59. YOYO
https://codepen.io/lumedkle/pen/jOmRdRY
-->

<!-- 60. Min Chun Tsai
codepen: https://codepen.io/Tsai0926/pen/NWjmVjR
-->
<!-- 61. ZY Hsu
https://codepen.io/zihyin/pen/mdmgNJx?editors=0110 -->

<!-- 62. Joe Kuo
codepen: https://codepen.io/alertislow/pen/yLbdYZG
-->

<!-- 63. Alberto
https://codepen.io/AlbertoLL/pen/LYyKyWr
-->

<!-- 64. Riley
https://codepen.io/jjpxbprd/pen/MWmMZvM
-->

<!-- 65. Sylvia-H
https://codepen.io/Cosmosheart/pen/MWogEvw?editors=1100 -->

<!-- 66. AKI
https://codepen.io/akichen27/pen/dyRXXpy
-->