不想當Window的Dialog不是一個好Modal,彈窗翻身記

2022-08-30 15:04:57

彈窗是我們熟視無睹的一種互動方式,經常用到,但從沒好好想過這種互動行為背後的意義...

彈窗是Windows的靈魂

Windows的靈魂是什麼?當然是Window,當方便快捷的多視窗進入人們視野的時候,大家無不為之驚呼太好用了!!

彈窗其實是一種多執行緒

當你需要保持當前任務執行,同時開啟一個新任務時,就需要多執行緒。彈窗何嘗不是一種互動領域的多執行緒?它可以掛起當前的操作流,然後開闢一片全新的操作區域,讓使用者重新開始一條新的操作流,並且等待其完成後還可以重新返回之前的操作環境。

彈窗其實就是Page

有的UI設計師討厭彈窗,覺得不美觀,我不知道為什麼?當你把一個彈窗放到最大,充滿整個視口,你會發現這不就是一個所謂的Page嗎?

彈窗是一種keep-alive

為了保持當前的捲動位置,使用者的操作環境等,最簡單的辦法就是使用彈窗,不銷燬底下的Dom元素,這不就是keep-alive嗎?

彈窗與Window

Window?Dialog?Modal?傻傻分不清楚,我也分不清楚,但我們也不用去槓,就是一個命名而已。我們可以約定,Window特指那些重量級的彈窗,而Dialog和Modal特指輕量級彈窗。

我們借用瀏覽器的Tab視窗來看:

  • Window裡面裝的是獨立的Page,而Dialog裡面裝的是一個獨立的Fragment;
  • Window裡面不僅Dom元素是獨立的,執行環境也是獨立的,而Dialog只是Dom元素獨立;
  • Window擁有獨立的歷史記錄棧,可以前進/後退/重新整理,而Dialog沒有這些功能;

沒有Window的SPA是不完整的

我們習慣用Single-Page-Application來模擬瀏覽器的多頁,從而可以更自由的控制頁面間的跳轉體驗,但一直缺乏一種對Window視窗的模擬。在多頁中我們可以一句話讓一個頁面在新視窗中開啟,比如:<a href="xxx" target="_blank">或者window.open(xxx),然而在SPA中即便是操作一個Dialog都是相對麻煩的事情,況且Dialog也不能算是Window。

實現虛擬Window

基於以上分析,個人實現了一個基本能滿足需求的虛擬Window。

先看看效果:虛擬Window

之所以說它是虛擬Window,而非Dialog,理由如下: