写在前面：

在准备写这篇文章之前发生了一些小插曲，今天又因为CSS上的问题被揪出来说事。本来想在正文前写一些初级前端的碰到这种鸡毛蒜皮的事情如何应对，后来想想还是不费脑汁了，WHO CARE，我的理解中前端的重点应该是编写框架的能力，至于那些不带逻辑的东西，改起来也很方便好吧

正文开始：

源码地址：https://github.com/dingjiamughal/components/blob/master/componentDialog.html（链接太长不能自动换行，加个word-wrap:word-break;嘛）

效果演示：https://dingjiamughal.github.io/components/componentDialog.html

首先还是先搭建组件开发的基本结构：

基本思路

第二步，完善原型方法：

创建html、定义ui样式

关闭功能、生成遮罩

viewWidth()：return document.documentElement.clientWidth;

viewHeight()：return document.documentElement.clientHeight;

以上基本功能完善，值得注意的地方：

在createMark中的oMark是执行createMark时定义的变量。在fnClose中需要remove遮罩，因此需要把oMark暴露成全局变量 —— this.oMark=oMark;接下来只要在init中调用create()和fnclose()即可，但是有个问题，此时并没有保存按钮点击的状态（当dialog弹出时，禁止点击）

初始化函数

定义json方法，将状态保存在json中，iNow=true时，弹窗才可出现，iNow = false时，能点击关闭按钮。

最后一步，方法调用