原生js如何创建弹出层

我们会经常遇到需要点击按钮出现弹出层的情况，弹出层和弹窗是不一样的。下面就来讲讲我的创建弹出层的方法。

首先，创建一个按钮，为按钮绑定事件，点击按钮 ，打开弹出层。

<button id = "btn">打开</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function(){
        openlayer();
}

接着构造函数，动态创建弹出层。

function openNew() {
          
            //创建遮罩层div并插入body
            var oMask = document.createElement("div");

            oMask.id = "mask";
           
            document.body.appendChild(oMask);

            var olayer = document.createElement("div");

            olayer.id = "layer";

            olayer.innerHTML = "<div class='content'><div id='close'></div></div>"

            document.body.appendChild(olayer);
           
            var oClose = document.getElementById("close");

            oMask.onclick = oClose.onclick = function () {

                document.body.removeChild(oMask);

                document.body.removeChild(olayer);
            }
        }

设置样式如下：

       * {
            margin: 0;
            padding: 0;
        }

        #mask {
            background: #000;
            opacity: 0.75;
            filter: alpha(opacity=75);
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1000;
        }

        #layer {
            position: fixed;
            left: 30%;
            top: 30%;
            z-index: 1001;
        }

        .content{
            width: 670px;
            height: 380px;
            background: rgb(25, 172, 12);
            border: 5px solid black;
        }

        #close {
            width: 20px;
            height: 20px;
            background: rgb(154, 2, 255);
            cursor: pointer;
            position: absolute;
            right: 10px;
            top: 10px;
        }

        #btn {
            width: 80px;
            height: 40px;
            background: #F01400;
            margin: 0 auto;
            display: block;
            cursor: pointer;
            border-style: none;
            color: #fff;
            font-size: 16px;
        }

实现效果如下：

 但是这样动态添加html元素并不是很方便的事儿。