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
2. 第 12 屆 IT 鐵⼈賽 Modal 功能介紹
3. 第 12 屆 IT 鐵⼈賽 Modal 功能介紹 開啟、關閉功能 在畫⾯後加入 overlay 可使⽤關閉按鈕、ESC、點擊 overlay 關閉視窗 將 body 的滾動鎖定
4. 第 12 屆 IT 鐵⼈賽 實作！
5. 第 12 屆 IT 鐵⼈賽 如何讓 Modal 變得更通⽤？ 透過 Store 管理 Modal 透過傳遞參數來讓其他元件呼叫 Modal
6. 第 12 屆 IT 鐵⼈賽 更貼⼼的 Modal 控制焦點只在 Modal 內部當中 加入 accessibility 的⽀援 role 的設定 aria-labelledby 與 aria-label 的設定等