分享一段免确认的alert弹窗代码

回复：3 查看：36

an666 Lv.3

4小时前发布广西

这是默认的弹窗确认框，需要点击确认，这个弹窗才会消失，极其的影响用户体验。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>测试一下</title>
</head>
<body>
<script>
alert("你好，这是一个弹窗确认框！");
</script>
</body>
</html>

怎么做成免确认的呢？有layui弹窗，但是，依赖layui组件，下面分享一段不需要layui组件的弹窗代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>测试一下</title>
</head>
<body>
<style>
.showfication{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:15px 25px;background-color:rgba(0,0,0,.7);color:#fff;border-radius:4px;box-shadow:0 4px 8px rgba(0,0,0,0.2);z-index:1000;animation:fadeIn 0.3s ease;max-width:80%;text-align:center}@keyframes fadeIn{from{opacity:0;transform:translate(-50%,-50%) scale(0.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)};}
</style>
<script>
function showficatalert(message, duration = 3000) {
    // 创建通知元素
    const notification = document.createElement('div');
    notification.className = 'showfication';
    notification.textContent = message;
    // 添加到页面
    document.body.appendChild(notification);
    // 定时自动关闭
    setTimeout(() => {
        notification.style.opacity = '0';
        notification.style.transform = 'translate(-50%, -50%) scale(0.9)';
        notification.style.transition = 'all 0.3s ease';
        // 动画结束后移除元素
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, duration);
}
//用法一：默认3秒后关闭
//showficatalert("你好，这是一个免确认提示框！");
//用法二：自定义N秒后关闭
showficatalert("你好，这是一个免确认提示框！",5000);// 1000=1秒
</script>
</body>
</html>

AI写的，我自己也在用，特别是不用layui组件时，用它比原生的弹窗代码好用。

打赏