简单的弹出框(dialog)制作
对一般的网站而言，弹出框是比较常见的。或是给出用户操作提示，或是通过弹出框打开一个小窗口以提示信息，或是给出错误警示等等。但是由于浏览器自带的弹出窗口alert , confirm , prompt样式比较单调，且不同浏览器有不同的默认样式设置。所以在日常工作中，给网站做一个自定义的弹出框十分必要。
当然一般的弹出框制作起来也十分简单，接下来我就相关细节做一说明。
HTML部分：
HTML部分由三部分组成，触发弹出框按钮 button , 弹出框遮罩层black, 弹出框盒子dialog包裹弹出框的所有内容。
写HTML结构时注意它们三部分都是平级关系。
CSS代码部分：
关键环节是，需要给遮罩层，和弹出框盒子设置固定定位。遮罩层需要全屏覆盖，所以宽高设置为100%。在为触发状态他们都应该处于display:none;隐藏状态。当触发时直接显示。
JS代码：
弹出框的一般效果是
当我们点击黑色透明区域或者X 时都需要将弹出框和遮罩层关闭。
以下是这个效果实现的JS代码部分：
首先，我们要逐一获取相关元素，包括：触发的按钮Btn , 遮罩层Back , 弹出框盒子DialogBox , 弹出框盒子自己的关闭按钮 DialogClose. 由于都会用到公共的document,这里由doc这个变量来代替。
获取完了相关元素后，给对应的元素添加相应的点击事件已触发相关行为。
Btn点击时将打开我们的盒子，遮罩层和弹出框盒子都应当显示出来，修改他们的display属性；
弹出框被打开后，点击DialogClose 或者 Back(其它黑色区域时) 都需要将其关闭，修改他们的display属性为none;
到这里一个基本的弹出框就制作完毕。
优化
由于每一个click事件都是触发相关元素的显隐控制，可以考虑使用一个公共方法，传递不同的参数来实现这个功能。
这里我们写了一个公共方法 ShowHide函数，接收的第一个参数为显隐阀门的布尔值。其它参数为需要进行同时控制的元素。
这里我们使用到函数自身的arguments对象。arguments里面保存了该函数传递进来的所有参数，这里当作一个数组使用。
用一个for循环迭代arguments。参数的第一项是布尔值，用来决定显隐关系，所以for循环i的第一个参数为1.依次给其它各项设置style属性。
通过这种方法，代码的复用性提高了很多。方便统一修改，引用。