自定义提示信息框

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tk_suss {
            border: 1px solid #c3e6cb;
            display: none;
        }

        .tk_sb {
            border: 1px solid #fc5531;
            display: none;
        }

        .tk_error {
            padding: 0 20px;
            height: 40px;
            color: #2b2b2c;
            font-size: 18px;
            line-height: 40px;
            text-align: center;
            border-radius: 5px;
            position: fixed;
            top: 40%;
            left: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="tk tk_suss">
        提交成功
    </div>
    <div class="tk tk_sb">
        提交失败
    </div>
    <div class="tk_error">Code Error</div>
</body>


<script>
    let failNode1 = $(`<div class="tk_error" id="tk_error">Code Error</div>`)
    $('body').append(failNode1)
    setTimeout(function () {
        $('#tk_error').remove();
    }, 2000)


</script>

</html>
相关推荐
Highcharts.js2 小时前
缺失数据可视化图表开发实战|Highcharts创建人员出生统计面积图表示例
开发语言·前端·javascript·信息可视化·highcharts·图表开发
LaughingZhu8 小时前
Product Hunt 每日热榜 | 2026-05-21
前端·人工智能·经验分享·chatgpt·html
怕浪猫8 小时前
Electron 开发实战(一):从零入门核心基础与环境搭建
前端·electron·ai编程
小鹏linux9 小时前
Ubuntu 22.04 部署开源免费具有精美现代web页面的Casdoor账号管理系统
linux·前端·ubuntu·开源·堡垒机
前端若水10 小时前
会话管理:创建、切换、删除对话历史
前端·人工智能·python·react.js
Bigger10 小时前
mini-cc:一个轻量级 AI 编程助手的诞生
前端·ai编程·claude
涵涵(互关)10 小时前
Naive-ui树型选择器只显示根节点
前端·ui·vue
BY组态11 小时前
Ricon组态系统最佳实践:从零开始构建物联网监控平台
前端·物联网·iot·web组态·组态
BY组态11 小时前
Ricon组态系统vs传统组态软件:为什么选择新一代Web组态平台
前端·物联网·iot·web组态·组态
SoaringHeart11 小时前
Flutter进阶:OverlayEntry 插入图层管理器 NOverlayZIndexManager
前端·flutter