标签:Dialog admin alive keep Window Modal 弹窗
弹窗是我们熟视无睹的一种交互方式,经常用到,但从没好好想过这种交互行为背后的意义...
弹窗是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,理由如下:
标签:Dialog,admin,alive,keep,Window,Modal,弹窗 来源: https://www.cnblogs.com/hiisea/p/16638875.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。