Question 265277 in Html Question posted in
Some basic documentation can be found here.

Html – The modal window closes when click on it

When clicking on the modal window (container-choose-number-phone-header) it closes, how to fix this problem? It is necessary that the modal window does not close when you click on it, but closes only when you click outside it.

Code:
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%;
    }

JS:
Actually here is the problematic code itself which for some reason does not work

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');
    }

});

In fact, it seems to be written correctly, but it is not clear what the error is, why is it not working?
If you need additional code, I am ready to provide a link to the GitHub project

Tags:

2

Answers


  1. 0

    The popup closes when you click on the popup because in your javascript you are just checking click on the icon which triggers the popup so when clicked on the popup it goes in the else and hides the popup.

    In the start of the listener check if the click is registered inside the popup container and if yes then return.

    Login or Signup to reply.
  2. 0 
    const containerChooseNumberPhoneHeaderEl = document.querySelector('.container-choose-number-phone-header');
const backgroundHeaderEl = document.querySelector('.background-header');

document.addEventListener('click', (event) => {
    if (event.target.closest(".container-choose-number-phone-header")) {
        return; // return when clicked on the popup area
    }

    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 (containerChooseNumberPhoneHeaderEl.classList.contains('show-modal-window-choose-number-phone') && !popup) {
        containerChooseNumberPhoneHeaderEl.classList.remove('show-modal-window-choose-number-phone');
        backgroundHeaderEl.classList.remove('loaded-background-header');
    }
});

    Something like this, you can adjust the behavior further as per you need and liking

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search