仅用js代码实现模态框

最新推荐文章于 2024-09-21 11:16:01 发布

万能守恒定律

最新推荐文章于 2024-09-21 11:16:01 发布

阅读量650

点赞数 2

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_50951790/article/details/131652691

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

很多时候我们经常会用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写入样式，我们就会得到下图的结果