纯JS实现模态框

实现原理
1、使用 js 动态 添加和删除类名 .display-hide { display: none } 控制模态框的弹出和隐藏；

2、使用fixed布局定义最外层的遮掩层；

3、使用document.body.clientWidth定义了模态框的宽度，使模态框完整显示在窗口。

总结：
1、css布局： 为了使遮掩层能充满窗口，最初在html 标签的样式是 { width：100%；height:100% }，
遮掩层的样式是{width：100%；height:100%; position: fixed}。如果弹框代码位于元素之后这种方式是有效的，但是如果弹框代码前面还有一些元素在占位，那么就会无法占满屏幕。因此使用了位置偏移的方法 { position: fixed; left: 0px ; top: 0px ;right: 0px; bottom: 0px }

2、使用js动态插入html元素的几个方法；这次使用的是使用innerHTML设置自定义的标题和内容；最初使用的时候用了append()方法，发现该方法插入html语句时会将其变成文本节点输出，而不会解析成html语句；所以应该使用innerHTML设置。
关于innerHTML,innerText,outerHTML区别：
例如：<div>hello<span>world</span></div>
innerHTML: 指对象标签中所有的包括html标签的内容，但是不包含对象标签本身，即hello<span>world</span>.
innerText: 指对象标签中所有的但不包括html标签的内容，也不包括对象标签本身，即
helloworld.
outerHTML: 指对象标签中所有的包括html标签的内容，也包括对象标签本身，即<div>hello<span>world</span></div>.

这些属性不仅可以读，还可以设置。
使用注意：
在innerHTML中设置值为<script src="foo.js"></script>,即内联脚本时，该脚本是不会执行的；
在设置innerText值时，会把该对象内的所有元素清空，例如把上例中的innerText= 'hei' => <div>hei</div>

兼容性问题

innerHTML所有浏览器兼容；innerText与outerHTML虽然主流浏览器，如谷歌，火狐，IE7-IE11，QQ等都已支持（这里提到的谷歌火狐等都是最新浏览器的版本），但是W3C的标准属性就是innerHTML,因此，尽可能地去使用innerHTML，而少用innerText与outerHTML。

3、浏览器模型
参考： http://www.cnblogs.com/polk6/p/5051935.html

CSS模型参考： http://zh.learnlayout.com/
项目github地址：https://github.com/fishlao/practise/tree/master