如何实现自定义alert div点击X按钮多次后才关闭的功能

核心思路是通过计数器记录关闭按钮的点击次数，累计到预设值后再执行隐藏弹窗操作。

步骤1：修改HTML结构 #

把原来的内联onclick逻辑替换为自定义函数调用，同时用data属性配置需要的点击次数，示例设置data-required-clicks="3"，代表需要点击3次才关闭，你可以自行修改这个值调整所需点击次数：

<div class="alert">
    <span 
        id="closeBtn" 
        class="closebtn" 
        data-required-clicks="3"
        onclick="handleCloseAlert()"
    >&times;</span>
    This is an alert box.
</div>

步骤2：添加JS逻辑 #

定义点击处理函数实现计数判断逻辑：

function handleCloseAlert() {
    const closeBtn = document.getElementById('closeBtn');
    const alertBox = closeBtn.parentElement;
    // 读取预设的点击次数要求
    const requiredClicks = parseInt(closeBtn.dataset.requiredClicks);
    // 计数器存储在按钮属性中，避免全局变量冲突，适配多弹窗场景
    let currentCount = parseInt(closeBtn.dataset.clickCount || 0);
    currentCount++;
    closeBtn.dataset.clickCount = currentCount;

    // 未达到点击次数时直接返回，不执行关闭
    if(currentCount < requiredClicks) {
        // 可选：点击未达标时给用户反馈，比如按钮临时变色
        closeBtn.style.opacity = '0.5';
        setTimeout(() => closeBtn.style.opacity = '1', 150);
        return;
    }

    // 达到次数后关闭弹窗，同时重置计数方便后续复用
    alertBox.style.display = 'none';
    closeBtn.dataset.clickCount = 0;
}

内容的提问来源于stack exchange，提问作者CompleteNoob