在做一個需要用到不同 modals 的網站
發現要做一個 modal 大概有三種選擇，也都各自有優缺。
-
Webflow interactions
- 自己做（基本沒必要不討論）
- 用 Finsweet attribute: accessible modal (IX2 版本)
-
Finsweet attribute: accessible modal (JS 版本)
-
Wized (embed 2.0)
先說 1. Webflow interactions
Finsweet attribute: accessible modal (IX2 版本)
優點：適合在不同螢幕大小會有不同行為的 modal。
例如說一個 filter componenet。在 desktop size 會保持顯示，但在 tablet size 以下會可以用按鈕開關。
這時候用 Webflow interaction 就可以確保他們有預期的行為，因爲 Webflow 在每個螢幕大小會重新刷新interaction，讓他們變回初始的狀態。
影片要按播放
缺點：有時候不想要在 breakpoints 重新刷新為初始狀態
2. Finsweet accessible modal (JS 版本)
優點：適合在不同螢幕大小行為一致的 modal。因為他不會在 breakpoints 刷新
適合大部分使用情境，有簡單的幾個開關動畫可以選擇，且有完整無障礙配套措施。
缺點：只能用在行為一致的 modal。
依上面 filter componenet 的例子，如果你從 tablet size 關閉 filter, 再回到 desktop size 時，這個 filter component 會消失。因為這個解決方案不會在螢幕 breakpoints 刷新初始狀態
3.Wized (embed 2.0)
會說到這個進階選項是因為 embed 2.0 多了 signals，一個程式碼的概念; 可以讓你更好的去管理 modal 的狀態。他有點像在寫 React，這裡有詳細解釋。
優點：適合需要更多複雜的邏輯的 web app，尤其是更大型的專案。
因為能透過 state 去控制 modal 開關。
例如我想確保用戶在關閉 modal 之前想不想儲存變更或放棄變更，這時後就比較好管理。
缺點：比較複雜，得先了解 signals 和 granular reactivity 這個概念，才能知道為什麼他好。
