1 引言
补充弹窗这种表现形式，弹窗就像一个自由容器，里面可以放入任意模块，通过统一链接控件进行连接，统一链接控件未来是一个很重要的连接器。
覆盖网站类型：http://www.moguzx.com/content/#thirdPage
用户场景：
B用户网站提示信息、操作确认；网站展示信息（富文本）、表单报名、填写信息、运营活动；登录注册、投票客服等。
（以上都是摘抄任务描述， 取消AB测）
产品经理：吴晓钦
设计：张如娜
测试：张策
2 总体概述
用户可以在site链接弹窗中新加弹窗容器模块，从而将链接绑定到该弹窗。从而在点击链接时弹出一个弹窗容器。
弹窗在管理态具有两种状态：预览态、编辑态
预览态的弹窗和site访客态的弹窗基本无异，只用于展示已经设置好的弹窗。不具备有编辑、修改功能。预览态可以通过点击编辑按钮进入管理态，也可以通过点击切换弹窗按钮进行预览其他按钮，但会先销毁当前弹窗。
管理态的弹窗相对复杂，会生成模块操作面板和保存取消按钮，其具有一下功能：
弹窗自身大小的resize
修改弹窗名称
添加内部模块（暂支持：文本、图片、按钮、在线表单、留言提交、在线投票模块）
修改内部模块名称，控制模块显示、隐藏、删除等
内部模块resize，拖拽等
此外，保存按钮可以保存以上所有设置，取消按钮则还原以上所有设置（通过销毁当前弹窗，重新ajax获取弹窗）
3 代码风格
使用popupZone对象来实例化一个弹窗，而大多方法都绑定到原型上。
访客态：
管理态（部分）：
4 具体设计和代码实现
一个弹窗就是一个popupZone实例，而且不可以同时存在两个及两个以上的弹窗。所以生成一个弹窗前需要检查是否已有弹窗。若有，则先销毁，再生成。
具体设计
新建弹窗的时候会调用 添加模块 的逻辑，从而生成一个新弹窗容器模块，模块名称也由 当前弹窗个数+1 来初始化。
新建的弹窗其实有两个过程
1，生成新弹窗， 进入预览态。
2，由预览态进入编辑态。
第一步代码代码如下：
而弹窗模块放置的地方其实是新开了一个版式（其实不太准确），其结构如下：
注：#popupLevel的父元素就是顶层body了
所以添加逻辑在Site.addNewModule中是有个分支的。
拿到了弹窗的Dom，之后的逻辑和点击链接展示弹窗的逻辑是基本一致的了（不同的就是编辑态的取消按钮逻辑）
要生成一个弹窗，先要实例化PopupZone对象。
然后调用PopupZone.show（）方法。让弹窗展示出来，即进入预览态。管理态需要生成两个操作按钮：编辑，切换弹窗（that.creatHoverTab()）。
点击 切换按钮 会销毁当前弹窗（ .destroy（）），之后才会打开新的弹窗。
点击 编辑按钮 会销毁以上两个按钮（ .destroyHoverTab（）），然后依次绑定弹窗自身resize（.resize（）），内部模块的管理态功能（自由块的功能 .inModuleEdit（））, 生成内部模块操作面板（.creatFunPanel（）），还有保存和取消按钮（.creatEditOperateBtn（））；
以上就是一个弹窗的生成编辑功能。
而销毁过程相对简单，以上的生成方法都有对应的destroy方法，因此，退出编辑态的时候只需要调用这些destroy方法即可，退出弹窗就只需要调用弹窗的destroy就可以了。
弹窗的状态可以通过 .editing区别。
代码实现
根据弹窗功能尽量具体细分为最简单的方法，然后用根据功能去调用这些最简单的细胞，从而到达降低代码复杂度。
代码实现如下：
实现过程中遇见的坑逼事情：
1，浏览器渲染和js执行先后问题
首先，这bug是本地不存在的。
上到svr2后，瓶子发现从链接弹窗直接编辑弹窗时，弹窗内部的图片会消失。经过排查后发现，在模块的Dom们append进页面后，模块的样式才会调用Site.addModuleStyle插入到#moduleStyle这个样式标签内，接着立即执行模块的Script。
而执行Script时新插入样式并没有起效，导致图片模块的width和height都被置为0，从而图片模块消失了。
解决方案：将模块样式先插入到页面中，之后才插入Dom和Script。
2、层级问题
弹窗模块的时候必然是最顶层的，但是在编辑态的时候，依然可以弹出其他弹窗，比如弹窗内的设置链接弹窗。我们的popupWindow的弹窗一般层级是9032，如果将弹窗模块的层级设置为9033的话，那么弹窗模块的内生成的弹窗就不可能高于弹窗模块。
解决方案：#popupLevel的层级也设置为9032，每次生成弹窗容器的时候，都将#popupLevel插入到顶层body的最后面，这样利用生成顺序来处理层级关系。（这一点在以后的开发中要加多注意）
5 运行环境
浏览器，site（访客态、管理态）
