js消息提示弹窗

最新推荐文章于 2025-06-19 19:48:29 发布

原创最新推荐文章于 2025-06-19 19:48:29 发布 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html5

小功能专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript和CSS创建非alert形式的消息弹窗的方法。通过创建一个初始隐藏的容器，当需要显示弹窗时，添加动画类使其可见，延迟一段时间后移除该类以关闭弹窗，确保每次打开都有动画效果。

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

js+css 实现消息弹窗（非alert）

思路

创建一个容器，默认在窗口之外，当事务处理完成之后使用js动态加载类名，这个类名包含这个窗口出现与隐藏的动画，之后在一段时间后清除这个类名，以便下次加载还有动画效果

具体代码如下：

html

<div id="successTips" >添加成功 √ </div>

css

// 设置容器样式
#successTips{
	position: absolute;
    left: 48%;
    top: -50px;
    padding: 5px;
    border-radius: 5px;
    background-color: transparent;
    color: transparent;
}
// 通过js动态加载类名实现元素的动画
.showAndHide{
    animation: showTips 1000ms cubic-bezier(0.5, 0.5, 1, 1);
}
// 动画实现
@keyframes showTips {
        0%{
            transform: translate(48%,0px);
            background-color: transparent;
            color: transparent;
        }
        25%{
            transform: translate(48%,100px);
            background-color: rgb(49, 226, 33);
            color: #fff;
        }
        75%{
            transform: translate(48%,100px);
            background-color: rgb(49, 226, 33);
            color: #fff;
        }
        100%{
            transform: translate(48%,0px);
            background-color: transparent;
            color: transparent;
        }
    }

JavaScript

// 点击页面弹出提示
document.onclick = function(){
    showTips();
}

// 这里封装了一个函数，哪里需要的时候调用就可以了
// 弹出提示
function showTips(){
    document.querySelector('#successTips').className = 'showAndHide';
    let timer = setTimeout(()=>{
        document.querySelector('#successTips').className = '';
    },2000)
    // clearTimeout(timer);
}

结束