Day13. UI 實戰篇：如何實作一個好的 Modal

第 12 屆 IT 鐵人賽影片教學 — 30 天從 0 到 1 學 Svelte

◼︎ 本集內容：如何實作一個好的 Modal？

Modal 是前端應用當中時常出現的 UI 之一，要實作一個 Modal，裡頭有許多需要考慮的細節，今天的影片會示範如何透過 Svelte 來實作一個完整的 Modal。

◼︎ 相關連結：

・Svelte 官網 https://svelte.dev
・程式碼範例：https://svelte.dev/repl/2db1f9d725e342e8bb08c8657ccae200?version=3.25.1

Transcript

1. 第 12 屆 IT 鐵⼈賽
   30 天從 0 到 1 學 Svelte
   Day13 - UI 實戰篇：盡可能實作⼀個好的 Modal
   

   View Slide

2. 第 12 屆 IT 鐵⼈賽
   Modal 功能介紹
   

   View Slide

3. 第 12 屆 IT 鐵⼈賽
   Modal 功能介紹
   開啟、關閉功能
   在畫⾯後加入 overlay
   可使⽤關閉按鈕、ESC、點擊 overlay 關閉視窗
   將 body 的滾動鎖定
   

   View Slide

4. 第 12 屆 IT 鐵⼈賽
   實作！
   

   View Slide

5. 第 12 屆 IT 鐵⼈賽
   如何讓 Modal 變得更通⽤？
   透過 Store 管理 Modal
   透過傳遞參數來讓其他元件呼叫 Modal
   

   View Slide

6. 第 12 屆 IT 鐵⼈賽
   更貼⼼的 Modal
   控制焦點只在 Modal 內部當中
   加入 accessibility 的⽀援
   role 的設定
   aria-labelledby 與 aria-label 的設定等
   

   View Slide