（给前端大全加星标，提升前端技能）
作者：前端劝退师公号/前端劝退师
前言在某个月黑风高的晚上...没剧刷的我无意想起以前处理的一些弹窗的坑。
然后又无意间刷到“Portal”，才知道Modal的实现还有如此妙的方式，顺而想着干脆把UI组件库的实现原理看完。
本文将讲述Modal弹窗类的实现原理：
1.Modal弹窗的基本原理我给弹窗类的定义是脱离固定的层级关系，不再受制于层叠上下文的组件。
常见的Modal模态框、Dialog对话框、Notification通知框等都是最最常用的交互方式。
在我们页面有时需要一些特定的弹窗时，通过改UI组件过于麻烦。
这时切图仔级别的会想：简单啊，创建一个div/给绝对定位不就得了。
倘若只是当前路由页用，也还凑合。「可一旦涉及到了组件复用以及抽象为声明式，就会有很大的隐患」：
若无封装，组件代码需要处处粘贴。即使封装了，都是在每个路由页下创建div/，易造成样式污染。类购物车的弹窗，又该如何处理数据及渲染？再进一步想，万一组件库会作为绩效考核，拿到每个环境都长得不一样，咋整？1.1Jqury时代的弹窗实现初初入行时，去各种资源站，找Jqury的UI组件，想必三四年经验的前端们都曾乐此不疲。
这个时代（也就三四年前）的弹窗，因为没有Ract/Vu根节点的概念，普遍都是：
「直接操作真实dom，使用熟知的dom操作方法将指令所在的元素appnd到另外一个dom节点上去。」如：documnt.body.appndChild。再通过ovrflow:hiddn或display:non（或调整z-indx）来隐藏。这种操作真实dom的代价，在大型项目中不停触发重绘/回流，是很糟糕的，且内部数据/样式不易更改。像以下这种情况就容易出现：
原本图片固定在区域内。小弹窗展示后，溢出了。随着Ract/Vu先进库的发展，也陆续有了多种方案选择。。。1.2Ract/Vu早期实现。其实Ract/Vu早期的实现和Jqury时代的并无二异：「依赖于父节点数据，在当前组件内挂载弹窗。」
Vu的情况稍好，有自定义指令这条路走。
?以下引自：《Vu中的Portal技术》
?以vu-dom-portal为例，代码非常简单无非就是将当前的dom移动到指定地方:
可以看到在insrtd的时候就拿到实例的l（真实dom），然后进行替换操作，在