# 🏅 Day 49 - Modal 實作運用

### 題目

運用 [modal 元件](https://getbootstrap.com/docs/5.3/components/modal/#how-it-works) 透過此 [模板](https://codepen.io/jmimiding4104/pen/gONKVjQ) 呈現以下手機板之彈跳式畫面(訂單明細處)


細節：

1. modal 會從下方向上升起。
2. 未打開時會呈現「打開明細」 icon 向上、打開時會呈現「關閉明細」 icon 向下

### 題目處理知識點

1. HTML 處會設定 modal 的滿版畫面，可參考此 [文件](https://getbootstrap.com/docs/5.3/components/modal/#fullscreen-modal) 修改 HTML *** 處。
2. 由下向上需要參考 [SCSS](https://getbootstrap.com/docs/5.3/components/modal/#sass-variables) 之設定，其中 $modal-fade-transform (關閉時) 與 $modal-show-transform (開啟時) 是其位置之資訊，可參考此 [文件](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate) 設定 CSS 中之 transform 資訊，設定 Y 軸於 fade (關閉時) 與 show (開啟時) 之位置。
3. 修改 JS 處，套入選擇器將 class 做動態的開啟與關閉。

## 回報流程

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


<!-- 解答：
https://codepen.io/jmimiding4104/pen/mdZKZYM
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
|01|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/RwzBxey)|
| 02 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/vYqapdp)|
| 03 | Mars |[Codepen](https://codepen.io/MarsKuo/pen/yLdqKKq)|
| 04 | Sonia |[Codepen](https://codepen.io/YUJOU/pen/yLdqQLP)|
| 05 | wind | [Codepen](https://codepen.io/wind7y/pen/mdZjvKY) |
| 06 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/zYVLRPp) |
| 07 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/zYVJxwx) |
| 08 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/jOjvZyE) |
| 09 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/PordLON) |
| 10 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/jOjQwzV) |
| 11 | Glen_69515 | [Codepen](https://codepen.io/glenyaochih/pen/oNrOvpv)|
| 12 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/LYKvddb)|
| 14 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/OJeYLjN) |
| 15 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/XWvrXav) |
| 16 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/RwXPoJg) |
| 17 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/NPWVrZm) |

<!--
| No | Discord | [Codepen]() |
-->