html提示弹窗（纯js，无需引入其他库）

本文链接：https://blog.csdn.net/weixin_44074105/article/details/124175144

网页开发很多时候都需要一些提示框，来显示某个动作的执行状态。
自带的window.alert还需要点确定按钮，很多时候我们只需要停留几秒的小弹窗，不需要用户点击或输入。
用js写一个函数，实现该功能。

//type:success, error, info
//time:ms
function displayAlert(type, data, time){

 	var lunbo=document.createElement("div");
 	
    if(type == "success") {
        lunbo.style.backgroundColor = "#009900";
    } else if(type == "error") {
        lunbo.style.backgroundColor = "#990000";
    } else if(type == "info") {
        lunbo.style.backgroundColor = "#e6b800";
    } else {
        console.log("入参type错误");
        return;
    }

    lunbo.id="lunbo";
    lunbo.style.position = "absolute";
    lunbo.style.width = "200px";
    lunbo.style.height = "60px";
    lunbo.style.marginLeft = "-100px";
    lunbo.style.marginTop = "-30px";
    lunbo.style.left = "90%";
    lunbo.style.top = "15%";
    lunbo.style.color = "white";
    lunbo.style.fontSize = "25px";
    lunbo.style.borderRadius = "20px";
    lunbo.style.textAlign="center";
    lunbo.style.lineHeight="60px";

    if(document.getElementById("lunbo")==null){
        document.body.appendChild(lunbo);
        lunbo.innerHTML=data;
        setTimeout(function(){
            document.body.removeChild(lunbo);
        } ,time);
    }
}

以下代码是参考其他大佬的，然后做了一些修改。
调用时的入参包含三部分：
1、type
success ：显示绿色弹窗
error: 显示红色弹窗
info:显示黄色弹窗
这几个颜色是我自己用取色器找的觉得比较好看的颜色，

    if(type == "success") {
        lunbo.style.backgroundColor = "#009900";
    } else if(type == "error") {
        lunbo.style.backgroundColor = "#990000";
    } else if(type == "info") {
        lunbo.style.backgroundColor = "#e6b800";
    } else {
        console.log("入参type错误");
        return;
    }

你也可以按照自己的喜好在此处去修改颜色的rgb值

2、弹窗内容
内容就根据需要传入就行。
弹窗的格式如下：

 lunbo.style.position = "absolute";
    lunbo.style.width = "200px";
    lunbo.style.height = "60px";
    lunbo.style.marginLeft = "-100px";
    lunbo.style.marginTop = "-30px";
    lunbo.style.left = "90%";
    lunbo.style.top = "15%";
    lunbo.style.color = "white";
    lunbo.style.fontSize = "25px";
    lunbo.style.borderRadius = "20px";
    lunbo.style.textAlign="center";
    lunbo.style.lineHeight="60px";

你也可以根据需要自己更改弹窗出现的位置，弹窗的边缘角度，以及文字的大小和颜色。

3、弹窗持续时间
单位为毫秒，传入整数即可。

简单再写一个html测试程序：

<html>
<script type="text/javascript">
	function displayAlert(type, data, time){

    var lunbo=document.createElement("div");
    
      if(type == "success") {
          lunbo.style.backgroundColor = "#009900";
      } else if(type == "error") {
          lunbo.style.backgroundColor = "#990000";
      } else if(type == "info") {
          lunbo.style.backgroundColor = " #e6b800";
      } else {
          console.log("入参type错误");
          return;
      }

      lunbo.id="lunbo";
      lunbo.style.position = "absolute";
      lunbo.style.width = "200px";
      lunbo.style.height = "60px";
      lunbo.style.marginLeft = "-100px";
      lunbo.style.marginTop = "-30px";
      lunbo.style.left = "90%";
      lunbo.style.top = "15%";
      lunbo.style.color = "white";
      lunbo.style.fontSize = "25px";
      lunbo.style.borderRadius = "20px";
      lunbo.style.textAlign="center";
      lunbo.style.lineHeight="60px";

      if(document.getElementById("lunbo")==null){
          document.body.appendChild(lunbo);
          lunbo.innerHTML=data;
          setTimeout(function(){
              document.body.removeChild(lunbo);
          } ,time);
      }
    }
    function test0() {
        displayAlert("success", "success TEST", 1500);
    }
    function test1() {
        displayAlert("error", "error TEST", 1500);
    }
    function test2() {
        displayAlert("info", "info TEST", 1500);
    }
</script>
<body>
	<button onclick="test0();">成功弹窗</button>
    <button onclick="test1();">失败弹窗</button>
    <button onclick="test2();">消息弹窗</button>
</body>
</html>

该程序可直接在https://www.w3school.com.cn/tiy/t.asp?f=eg_html_td_colspan这个网址复制粘贴然后运行。

实现效果为
在这里插入图片描述
如果工程较大可以直接将该函数单独写在js文件中，在html中引用即可。在其他js中引用有时会提示找不到文件，可以将两个js文件都放在html的body之后，例如：
我在这个html中引用了infoCfg.js,，而这个js文件需要调用弹窗显示，就在html的该位置处引用这两个js即可。
在这里插入图片描述
OK，完毕。