仅用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写入样式，我们就会得到下图的结果