on building modals

在做一個需要用到不同 modals 的網站

發現要做一個 modal 大概有三種選擇,也都各自有優缺。

  1. Webflow interactions :slightly_smiling_face:

    • 自己做(基本沒必要不討論)
    • 用 Finsweet attribute: accessible modal (IX2 版本)
  2. Finsweet attribute: accessible modal (JS 版本) :+1::+1::+1:

  3. Wized (embed 2.0) :face_with_monocle:

先說 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 這個概念,才能知道為什麼他好。


Hey @Sean_Chen
Happy New Year man, havent see you for a while, hows everything?

So what kind of Wized project you had been working now? maybe I have some side gigs for you, lets schedule sometime to have a zoom call when you are available, lets talk :slight_smile:

Hi, Erik! Happy New Year. It’s so nice to hear from you. I’m working on a job board in Wized Embed 2.0, and I’m having a really good time with it. I have so much I want to share. I’m building my projects in Client-First now too haha no more Div Block 255. Definitely down to talk and work on the side gig! Would you like me to schedule a time on your Calendly?