🏅 切版任務 Day25 - Modal 效果製作

在本次的設計稿中的「作品集」區塊有這麼一段，
當我們點擊該作品卡片時會呈現此互動式視窗，
這邊我們可以透過使用 Bootstrap 中的 Modal 元件呈現出此效果。

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Bootstrap CDN 載入

首先我們需要將需要的官方文件之資源載入，
目前我們的 CodePen 會使用 CDN 的方式載入

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

以下是 HTML 中須放在 <head> 中的資料，主要是載入 CSS 的資訊

<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 載入的部分

<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 後將需要的程式碼載入，

<!-- 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 互動視窗可以置中，可以參考此文件
使用此模板修改 … 的部分(在上方的程式碼中，有部分解說能參考並依據提示修改)，讓畫面能呈現下方樣式

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

回報流程

將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

回報區

報數	Discord 名字	Codepen／其他回饋
1	Meng	Codepen
2	Michelle0417	Codepen
03	Aya	Codepen
4	Ariel	Codepen
5	anderson666	Codepen
6	Chia Pin	Codepen
7	Emma	Codepen
8	JY	Codepen
9	詹姆士	Codepen
10	Tough life	Codepen
11	邵	Codepen
12	Shen	Codepen
13	JUN_	Codepen
14	easonpan	Codepen
15	ninii傳教士	Codepen
16	s870012	Codepen
17	kawa	Codepen
18	zaoannihao	Codepen
19	yunyouob	Codepen
20	KUN.	Codepen
21	Kaya	Codepen
22	peggy	Codepen
23	Hailey	Codepen
24	Antonio	Codepen
25	boin	Codepen
26	Winnie	Codepen
26	毛巾	Codepen
27	LYC	Codepen
28	Sammy	Codepen
29	macihuang	Codepen
30	maruko1105	Codepen
31	WEIWEI	Codepen
32	勾小勻	Codepen
33	Anais77	Codepen
34	oyll	Codepen
35	Anna	Codepen
36	Amy(咂摳)	Codepen
37	hao jing	Codepen
38	Yini Chen	Codepen
39	Jainee	Codepen

🏅 切版任務 Day25 - Modal 效果製作

介紹 Modal

設計稿 Modal 區塊介紹

Bootstrap CDN 載入

Modal 實作

題目

回報流程

回報區

Read more

上課直播間 ZOOM 註冊

上課直播間 ZOOM 註冊

觀看錄影檔

觀看錄影檔