彈窗是我們熟視無睹的一種互動方式,經常用到,但從沒好好想過這種互動行為背後的意義...
Windows的靈魂是什麼?當然是Window,當方便快捷的多視窗進入人們視野的時候,大家無不為之驚呼太好用了!!
當你需要保持當前任務執行,同時開啟一個新任務時,就需要多執行緒。彈窗何嘗不是一種互動領域的多執行緒?它可以掛起當前的操作流,然後開闢一片全新的操作區域,讓使用者重新開始一條新的操作流,並且等待其完成後還可以重新返回之前的操作環境。
有的UI設計師討厭彈窗,覺得不美觀,我不知道為什麼?當你把一個彈窗放到最大,充滿整個視口,你會發現這不就是一個所謂的Page嗎?
為了保持當前的捲動位置,使用者的操作環境等,最簡單的辦法就是使用彈窗,不銷燬底下的Dom元素,這不就是keep-alive嗎?
Window?Dialog?Modal?傻傻分不清楚,我也分不清楚,但我們也不用去槓,就是一個命名而已。我們可以約定,Window特指那些重量級的彈窗,而Dialog和Modal特指輕量級彈窗。
我們借用瀏覽器的Tab視窗來看:
我們習慣用Single-Page-Application來模擬瀏覽器的多頁,從而可以更自由的控制頁面間的跳轉體驗,但一直缺乏一種對Window視窗的模擬。在多頁中我們可以一句話讓一個頁面在新視窗中開啟,比如:<a href="xxx" target="_blank">
或者window.open(xxx)
,然而在SPA中即便是操作一個Dialog都是相對麻煩的事情,況且Dialog也不能算是Window。
基於以上分析,個人實現了一個基本能滿足需求的虛擬Window。
先看看效果:虛擬Window
之所以說它是虛擬Window,而非Dialog,理由如下: