--- tags: 軟體工程師體驗營 - 2024 --- # 🏅 切版任務 Day25 - Modal 效果製作 ## 介紹 Modal ### 設計稿 Modal 區塊介紹 在本次的設計稿中的 「作品集」 區塊有這麼一段， 當我們點擊該作品卡片時會呈現此互動式視窗， 這邊我們可以透過使用 Bootstrap 中的 Modal 元件呈現出此效果。 ![](https://imgur.com/z1FIwV9.png) ### Bootstrap CDN 載入 首先我們需要將需要的 [官方文件之資源](https://getbootstrap.com/) 載入， 目前我們的 CodePen 會使用 CDN 的方式載入 ![](https://imgur.com/aPCVtmU.png) 以下是 HTML 中須放在 <head> 中的資料，主要是載入 CSS 的資訊 ```html <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> ``` 接著是 JS 載入的部分 ```html <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> ``` 當我們使用 CodePen 時，因為有內建相關的網頁架構內容，匯入的位置就會放在 Setting 內，擷取其中的網址放入就可以了 ``` https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js ``` ### Modal 實作 接著找到我們需要的元件 => [modal](https://getbootstrap.com/docs/5.3/components/modal/#examples) 後將需要的程式碼載入， ```html <!-- Button trigger modal 觸發 modal 的部分 --> <!--這邊會需要與下方要開啟的 modal 實體對上，也就是這邊是一個選擇，我們需要在 data-bs-target 的部分指向我們要開啟的 modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <!--而這邊的 ID 就需要寫上與 data-bs-target 的 ID 指向名，就像上方的按鈕是郵差而這邊是門牌號碼，我們需要正確配對讓點擊按鈕時能開啟這邊的實體--> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <!--因為我們需要使用到垂直置中，而 bootstrap 是有設定好我們需要的垂直置中的功能，可以透過 HackMD 提到的官方文件，將語法添加在這邊--> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1> <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> ``` 就能成功使用到我們這個元件。 當我們的設計稿內沒有按鈕該怎麼辦呢？ 我們只需要將 「觸發 modal 的部分」 放在我們預期要點擊的容器上， 就可以一樣觸發 modal 的效果。 若想了解更多可以透過課程影音的 Bootstrap5 章節了解更多。 ### 題目 透過以上教學運用 Modal 元件，並嘗試讓 Modal 互動視窗可以置中，可以參考此 [文件](https://getbootstrap.com/docs/5.3/components/modal/#vertically-centered) 使用此 [模板](https://codepen.io/jmimiding4104/pen/NWVbvJK) 修改 ... 的部分(在上方的程式碼中，有部分解說能參考並依據提示修改)，讓畫面能呈現下方樣式 ![](https://imgur.com/rW93KPo.png) ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) <!-- 參考解答： https://codepen.io/jmimiding4104/pen/ExzNvMX --> 回報區 --- | 報數 | Discord 名字 | Codepen／其他回饋 | |:----:|:-------------------:|:-------------------------------------------------:| | 1 | Meng | [Codepen](https://codepen.io/menglin1203/pen/LYoboOJ) | | 2 | Michelle0417 |[Codepen](https://codepen.io/michelle0417/pen/KKLNLoa) | | 03 | Aya | [Codepen](https://codepen.io/NoNameNote/pen/qBGqGJQ) | | 4 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/rNgWgPd) | | 5 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/pomNXod) | | 6 | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/JjqbQYz) | | 7 | Emma | [Codepen](https://codepen.io/huang_L/pen/xxNRowM) | | 8 | JY | [Codepen](https://codepen.io/jylee0805/pen/XWwNLJP?editors=1000) | | 9 | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/eYaBaje) | | 10 | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/vYwyqrX) | | 11 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/dyEOxVz)| | 12 | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/eYaBqeN) | | 13 | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/XWwNLxw) | | 14 | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/abrBeQJ) | | 15 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/rNgjBxy?editors=1100) | | 16 | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/XWwprbR) | | 17 | kawa | [Codepen](https://codepen.io/z83xji6/pen/PovWoqN?editors=1010) | | 18 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/dyENyrX?editors=1000) | | 19 | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/abrpzoz?editors=1010)| | 20 | KUN. | [Codepen](https://codepen.io/barry91205/pen/oNRBjYK) | | 21 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/gOJgPyQ) | | 22 | peggy | [Codepen](https://codepen.io/peggy0419/pen/dyENpBd) | | 23 | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/WNBRELB) | | 24 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/oNRBGaQ) | | 25 | boin | [Codepen](https://codepen.io/boinji/pen/LYoxOzw) | | 26 | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/MWdJOZP?editors=1000) | | 26 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/VwOPOeX) | | 27 | LYC | [Codepen](https://codepen.io/LY-C/pen/LYoWPxe) | | 28 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/bGyqbXE) | | 29 | macihuang | [Codepen](https://codepen.io/macy1215/pen/jOoBBLe) | | 30 | maruko1105 | [Codepen](https://codepen.io/marukox1105/pen/OJYpOby?editors=1010) | | 31 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/rNgmyJb) | | 32 | 勾小勻 | [Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/BaeZdOd) | | 33 | Anais77 | [Codepen](https://codepen.io/liu-anais/pen/XWwgavL?editors=1100) | | 34 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/xxNLLEa) | | 35 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/pomdOQR)| | 36 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/GRaObLG)| | 37 | hao jing | [Codepen](https://codepen.io/hjxu/pen/YzbYbem?editors=1111)| | 38 | Yini Chen | [Codepen](https://codepen.io/CYini/pen/yLWvdOK)| | 39 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/ExzdLOe)| --- <!-- | num | user | [Codepen]() | -->