如何解决点击container-choose-number-phone-header模态窗时自动关闭的问题

问题描述 #

点击类名为container-choose-number-phone-header的模态窗口时，窗口会意外关闭。需求为：模态窗仅在点击外部区域时关闭，点击自身不触发关闭。

现有代码 #

HTML代码 #

<!--     Modal window choose number phone      -->
<div class="background-header"></div>
<!--     Modal window choose number phone      -->
    <div class="container-menu-header-number-phone">
        <div class="svg-icon-header-phone">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.750007 10.8488C-1.16228 7.01115 0.767201 2.77583 4.44387 0.569824C6.21403 -0.49226 8.50182 -0.0313341 9.72259 1.63336L12.431 5.32664C13.5838 6.89858 13.7604 8.98327 12.8887 10.7268L12.1785 12.1471C11.973 12.5582 11.9405 13.0338 12.1508 13.4427C12.5339 14.1872 13.3498 15.5071 14.9214 17.0786C16.4931 18.6502 17.8128 19.4662 18.5575 19.8492C18.9662 20.0595 19.4418 20.0271 19.8529 19.8215L21.2733 19.1112C23.0167 18.2396 25.1014 18.4162 26.6734 19.569L30.3667 22.2774C32.0314 23.4981 32.4922 25.7859 31.4301 27.5561C29.2241 31.2329 24.9889 33.1623 21.1512 31.25C17.9168 29.6383 13.7838 26.9709 9.40636 22.5936C5.02898 18.2162 2.36167 14.0832 0.750007 10.8488Z"
                      fill="black"></path>
            </svg>
        </div>
    </div>

CSS代码 #

/* MODAL WINDOW CHOOSE NUMBER PHONE */
.background-header {
    visibility: hidden;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.0);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.loaded-background-header {
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 1;
}

.container-choose-number-phone-header {
    opacity: 0;
    visibility: hidden;
    width: 500px;
    height: 135px;
    background-color: #333333;
    border-radius: 10px;

    position: absolute;
    top: 100px;
    right: 350px;

    transform: translateY(-30%);
    transition: 300ms ease;
}

.show-modal-window-choose-number-phone {
    visibility: visible;
    transform: translateY(0);
    transition: 300ms ease;
    opacity: 1;
}

.choose-number-phone-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
}

.number-phone-modal-window {
    font-size: 18px;
    color: white;
    font-family: sans-serif;

    cursor: pointer;
}
    /* CONTAINER PHONE ADAPTATION */
    .container-menu-header-number-phone {
        display: flex;
        width: 105px;
        background-color: #c8b197;
        height: 50px;

        border-left: 1px gray solid;
        border-top: 1px gray solid;
        border-bottom: 1px gray solid;

        cursor: pointer;
    }

    .svg-icon-header-phone {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
    }

JavaScript代码 #

const containerChooseNumberPhoneHeaderEl = document.querySelector('.container-choose-number-phone-header');

const backgroundHeaderEl = document.querySelector('.background-header');

document.addEventListener('click', (event) => {
    const popup = event.target.closest('.container-menu-header-number-phone');
    // console.log(popup)

    if (popup) {
        containerChooseNumberPhoneHeaderEl.classList.toggle('show-modal-window-choose-number-phone');
        backgroundHeaderEl.classList.add('loaded-background-header');

    } else if (!popup && containerChooseNumberPhoneHeaderEl.classList.contains('show-modal-window-choose-number-phone')) {
        containerChooseNumberPhoneHeaderEl.classList.remove('show-modal-window-choose-number-phone');
        backgroundHeaderEl.classList.remove('loaded-background-header');
    }

});

问题原因 #

当前JS逻辑仅判断了点击是否来自模态窗的触发按钮.container-menu-header-number-phone，但未排除点击模态窗自身的情况。当点击模态窗内部时，event.target.closest('.container-menu-header-number-phone')返回null，同时模态窗处于显示状态，会触发关闭逻辑，导致点击自身也关闭。

修复方案 #

在关闭逻辑的条件中添加判断，排除点击模态窗内部的情况。具体来说，检查点击目标是否属于模态窗.container-choose-number-phone-header，如果是则不执行关闭操作。

修复后的JavaScript代码 #

const containerChooseNumberPhoneHeaderEl = document.querySelector('.container-choose-number-phone-header');
const backgroundHeaderEl = document.querySelector('.background-header');

document.addEventListener('click', (event) => {
    const triggerBtn = event.target.closest('.container-menu-header-number-phone');
    const modalContent = event.target.closest('.container-choose-number-phone-header');

    if (triggerBtn) {
        containerChooseNumberPhoneHeaderEl.classList.toggle('show-modal-window-choose-number-phone');
        backgroundHeaderEl.classList.add('loaded-background-header');
    } else if (!triggerBtn && !modalContent && containerChooseNumberPhoneHeaderEl.classList.contains('show-modal-window-choose-number-phone')) {
        containerChooseNumberPhoneHeaderEl.classList.remove('show-modal-window-choose-number-phone');
        backgroundHeaderEl.classList.remove('loaded-background-header');
    }
});

修改说明 #

1. 新增modalContent变量，用于检测点击目标是否属于模态窗内部元素；
2. 在关闭逻辑的条件中添加!modalContent判断，确保只有点击既不是触发按钮、也不是模态窗内部的区域时，才关闭模态窗。

内容的提问来源于stack exchange，提问作者TopTTeDHbIu-DeJLbFuH4uk