js单击按钮，显示遮罩层和弹出层

1、遮罩层：<div id="back"></div> ，即作为背景层，覆盖整个页面。

弹出层：<div id="form"></div>，即背景层上的一层，此层可根据

#form{

             top: 10%;

             left: 10%;

             width: 20%;

             height: 30%;

}，调整弹出层的弹出位置，

完整的如图所示：

2、弹出层和遮罩层全部为div标签，可以利用display来控制显示和隐藏的属性.

在js中，显示：    document.getElementById('divID').style.display = 'block';

隐藏：document.getElementById('divID').style.display = 'none';

3、本例中：显示遮罩层和弹出层，即可用图中popDiv（）函数表示： 其中，showId 表示弹出层的divId, backId 表示遮罩层的divId；函数第去、2行显示弹出层和遮罩，3、4、5行设置遮罩层的长度、宽度

4、关闭弹出层和遮罩层用hideDiv函数（）， 其中：showId 表示弹出层的divId, backId 表示遮罩层的divId；先关闭弹出层，后关闭遮罩层。

5、点击按钮后，弹出，要给按钮加上onclick函数，如下：

<button onclick="popDiv('form','back')">点我，显示弹出层</button>

6、整体代码如下，css 样式可根据个人的喜好自行添加：