div+css+js实现弹出框

面试被问到如何让弹出框居中，然而自己没有做过弹出框，搜资料，自己就试着做了一个。

效果：
点击弹出框按钮后，页面上显示一个弹出框，并且背景要变成灰色，原始页面不能被操作的，直到关闭弹出框。 
原理：
在原页面的基础上添加两个格，一个是弹出层，一个是遮罩层，即背景层。这两个div和原始页面是在一个文件中，首先通过设置display：none;让这两个div不显示，然后通过给弹出框按钮和关闭按钮绑定事件来实现弹出框的显示和隐藏; 
实现：
1。先实现页面布局;一个弹出框按钮，一个背景层，一个弹出层，一个关闭按钮。

    

        关闭
    
    
我是弹出层

2.设置弹出层和背景层的display属性为none;让他们默认隐藏不显示;

3.先给两个div设置背景颜色，方便查看;

4.设置背景层的定位;

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

5.设置弹出层的显示大小，并且居中显示;

width: 200px;
height: 200px;
position:fixed;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);

6.使用z-index属性设置背景层和弹出层的上下位置，值越大越靠上显示;

7.设置背景层的透明度; 

8.对关闭按钮的样式做调整;哦了。

完整代码：

    
    
    
    
    
    





    

        关闭
    
    
我是弹出层

效果：