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

来源:https://www.cnblogs.com/hiisea/archive/2022/08/30/16638875.html
-Advertisement-
Play Games

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


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

彈窗是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,理由如下:


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1. 丐版 HelloWebGPU 最簡單的 WebGPU 程式應該是這樣的: <script> const init = () => { if ('gpu' in navigator) { console.log(navigator.gpu) } else { console.log('瀏覽器不支 ...
  • 8 JSON 因平時工作時,使用JSON的場景比較多,其JSON語法不再介紹,僅介紹在JavaScript中JSON的解析和序列化。 8.1 JSON 對象 JSON對象有兩個方法: stringify():將JavaScript序列化為JSON字元串 parse():將JSON解析為原生JavaS ...
  • 在B/S系統開發中,前後端分離開發設計已成為一種標準,而VUE作為前端三大主流框架之一,越來越受到大家的青睞,Antdv是Antd在Vue中的實現。本系列文章主要通過Antdv和Asp.net WebApi開發學生信息管理系統,簡述前後端分離開發的主要相關內容,僅供學習分享使用,如有不足之處,還請指... ...
  • 閑聊: 小穎今年四月底從西安跑到深圳來找工作,本來想著好好賺錢還房貸,結果快轉正了被通知要麼無薪待崗,要麼辦理離職,嗯~ o(* ̄▽ ̄*)o.............................. 想罵人咋辦 ? 小穎之前沒怎麼寫過小程式,到這邊後接手了離職小姐姐的工作,看代碼、看api、自己試 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 File() File() 構造器創建新的 File 對象實例。 語法 var myFile = new File(bits, name[, options]); 參數 bits 一個包含ArrayBuffer,ArrayBufferVi ...
  • 原文鏈接:https://dev.to/ruppysuppy/7-tips-for-clean-react-typescript-code-you-must-know-2da2 “乾凈的代碼”不僅是可以正常運行的代碼。它指的是組織整齊、易於閱讀、易於理解且易於維護的代碼。 讓我們來看看 React ...
  • 進入/離開 & 列表過渡 點擊打開視頻講解更加詳細 概述 Vue 在插入、更新或者移除 DOM 時,提供多種不同方式的應用過渡效果。包括以下工具: 在 CSS 過渡和動畫中自動應用 class 可以配合使用第三方 CSS 動畫庫,如 Animate.css 在過渡鉤子函數中使用 JavaScript ...
  • 本文是深入淺出 ahooks 源碼系列文章的第十五篇,該系列已整理成文檔-地址。覺得還不錯,給個 star 支持一下哈,Thanks。 本篇接著針對關於 DOM 的各個 Hook 封裝進行解讀。 useFullscreen 管理 DOM 全屏的 Hook。 該 hook 主要是依賴 screenfu ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...