HTML 自定义弹窗自动消失

最新推荐文章于 2025-07-05 10:11:32 发布

原创最新推荐文章于 2025-07-05 10:11:32 发布 · 9.7k 阅读

14 ·

CC 4.0 BY-SA版权

html5 同时被 3 个专栏收录

2 篇文章

订阅专栏

1 篇文章

订阅专栏

弹窗框

1 篇文章

订阅专栏

本文介绍了一种在HTML中自定义弹出窗口的方法，通过JavaScript动态创建并控制div元素，实现了弹窗显示指定信息并在3秒后自动消失的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html中有一些弹出窗，如alert，confirm等。但是有些我们特定的需求不好实现，比如弹出窗弹出后3s后消失，所以要用到自己定义的弹出窗。如下：参考借鉴：https://zhidao.baidu.com/question/589365277.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
    <!-- 点击按钮，传递显示数据 -->
	<button id="btn" onclick="func('数据更新成功')">btn</button>
    <!-- 显示的时间弹窗的div -->
	<div id="date"></div>
</body>
<script>
    // 创建一个div
    var layer=document.createElement("div");
    // 设置div的id值
    layer.id="layer";
    // 上面按钮点击事件
    function func(date){
        /* 创建div的样式，宽200px,高80px，下面的是css样式居中，
         * css样式居中具体了解链接：https://blog.youkuaiyun.com/A_Bear/article/details/80546181
         */
        var style={
            background:"#f00",
            position:"absolute",
            zIndex:10,
            width:"200px",
            height:"80px",
            left:"50%",
            top:"50%",
            marginLeft:"-100px",
            marginTop:"-40px"
        }
        for(var i in style)
            layer.style[i]=style[i];   
   
        // 当找不到id为layer的控件时
        if(document.getElementById("layer")==null){
            // 在body中添加layer控件（layer在上面创建的）
            document.body.appendChild(layer);
            // 设置显示类容
            layer.innerHTML=date;
            // 将div中文本居中
            layer.style.textAlign="center";
            layer.style.lineHeight="80px"; // 作用是调节字体行高与div同高，使其保持水平居中
            // 设置3s后去掉弹出窗
            setTimeout("document.body.removeChild(layer)",3000)
        }
    }

    // 下面是计时控件js
    change();  
    function change(){  
        var today;  
        today = new Date();  
        timeString = today.toLocaleString();  
        document.getElementById("date").innerHTML = timeString;  
        setTimeout("change();", 100);  
    }
</script>
</html>