JavaScript 与 CSS 实现自定义 Toast 弹框提醒

CSS

居中显示。

.toast {
    position: fixed;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease;
}

.toast.fade-out {
    opacity: 0;
}

JavaScript

function showToast(text) {
    let toast = document.createElement("div");
    toast.classList.add('toast');
    toast.textContent = text;

    document.body.appendChild(toast);

    // 设置定时器在3秒后隐藏Toast
    setTimeout(function() {
        toast.classList.add("fade-out");
        setTimeout(() => {
            document.body.removeChild(toast);
        }, 300)
    }, 3000);
}