参考慕课网课程《分享：阿当大话西游之WEB组件》
定制不同的皮肤可通过对元素添加或减少class类来实现。
首先，模态是指如下图部分的灰色背景部分：（灰色部分不可点击）
然后，要记住，模态要加在当前页面的上面，以及当前操作框（通常是一个弹出层）的下面
所谓上面，下面是指：
如果模态（通常是一个div）的定位是fixed（固定定位）的，那么它将不占据文档空间，
所以，将其height和width设置为100%，另外，设置left:0;top:0。即为铺满整个屏幕。
然后，在html中，处于此div之前的元素将不可触及。
那么如何让弹出层可以被focus呢？
答案就是让让此弹出层处于模态之后，然后同样设置position:fixed(固定定位)，调整其
top,left等，让其位置和模态发生”重叠“，由于它是处于模态之后的，所以位置重叠的情况下，
浏览器会将其放到上面来，但是其z-index值并没有发生改变。
（通常也不通过设置z-index的值来特意让模态处于弹出层的下方，因为这样会让原本页面的元素
处于模态之上，从而可以被操作，这样就达不到模态想要的结果）。
失败的代码：
function mask(){
var masknode = document.createElement("div");
masknode.className="mask";
masknode.id="window_mask";
document.body.appendChild(masknode);
}
这里的关键是：appendChild操作会将节点插到body的最后面，这样在它之前的所有元素都将被覆盖
从而连弹出层都得不到焦点，不能操控。
成功的代码：
function mask(){
var masknode = document.createElement("div");
masknode.className="mask";
masknode.id="window_mask";
/*在Box之前插入mask*/
document.body.insertBefore(masknode,document.getElementById("Box"));
//document.body.appendChild(masknode);
}
这里Box就是弹出层，在Box之前插入mask，因为Box是处于模态之后的，
所以它就可以在模态之上，因而可以被点击。
另：jQuery的masknode.appendTo(body)，会将masknode插入到紧邻body之后。
![ZC}3()][)VDKS[3BP0LS$~J.jpg](http://images.cnitblog.com/blog/612485/201407/211722541196966.jpg){kind=link}