仅用js代码实现模态框

很多时候我们经常会用ui框架实现模态框的使用，但是，如果哪一天告诉我们，如何仅用js代码实现一个模态框该怎么办呢？

这里就要用到很多js中的基础方法运用了，我们先看如下代码

 var logDiv = document.createElement("div");
 logDiv.setAttribute("style", "display: none;");
 document.body.appendChild(logDiv);
 var logP = document.createElement("p");
 logP.setAttribute("style", "width: 300px;height: 300px;background: red;margin: 0 auto;text-align: center;");
 logP.innerHTML = "弹出框";
 logDiv.appendChild(logP);
 var logSpan = document.createElement("span");
 logSpan.setAttribute(
                "style",
                "width: 20px;height: 20px;padding: 0;margin: 0;float: right;background: brown;color: white;cursor: pointer;"
            );
 logSpan.innerHTML = "X";
 logP.appendChild(logSpan);
 logSpan.onclick = function () {
       logDiv.setAttribute("style", "display: none;");
      };
 logDiv.setAttribute("style", "top:100px;position:absolute;display: block;width: 100%;height: 620px;");

其实就是主要在js中创建html的结构即可，然后通过setAttribute写入样式，我们就会得到下图的结果