Как не закрывать мобильное меню , когда закрываею модальное окно?

Question

Когда откыто модальное окно и меню одновременно, то при килке закрытия модального окна закрывается и меню. Как прописать условие чтобы оно не закрывалось, когда закрываю модальное окно?

//burger menu
const headerBurger = document.querySelector('.burger');
const headerClose = document.querySelector('.nav__top-close');
const headerMenu = document.querySelector('.nav');
const page = document.querySelector('.page');
const body = document.body;
const open = function () {
    headerBurger.isClick = true
    headerMenu.classList.toggle('active-menu');
    body.classList.toggle("noscroll");
    body.classList.toggle("bg");
    page.classList.toggle('active-bg');
}
headerClose.addEventListener("click", function (e) {
  e.stopPropagation();
  closeOnClick();
});
headerBurger.addEventListener("click", function (e) {
  e.stopPropagation();
  open();
});

document.addEventListener("click", function (e) {
  const target = e.target;
  const its_menu = target == headerMenu || headerMenu.contains(target);
  const its_btnMenu = target == headerBurger;
  const menu_is_active = headerMenu.classList.contains("active-menu");

  if (!its_menu && !its_btnMenu && menu_is_active) {
    open();
  }
});


//popup
const popupLinks = document.querySelectorAll('.popup-link');
const lockPadding = document.querySelectorAll('.lock-padding');
let unlock = true;
const timeout = 300;

if (popupLinks.length > 0) {
    for (let index = 0; index < popupLinks.length; index++) {
        const popupLink = popupLinks[index];
        popupLink.addEventListener('click', function (e) {
            const popupName = popupLink.getAttribute('href').replace('#', '');
            const curentPopup = document.getElementById(popupName);
            popupOpen(curentPopup);
            e.preventDefault();
        });
    }
}

const popupCloseIcon = document.querySelectorAll('.close-popup');
if (popupCloseIcon.length > 0) {
    for (let index = 0; index < popupCloseIcon.length; index++) {
        const el = popupCloseIcon[index];
        el.addEventListener('click', function (e) {
            popupClose(el.closest('.popup'));
            e.preventDefault();
        });
    }
}

function popupOpen(curentPopup) {
    if (curentPopup && unlock) {
        const popupActive = document.querySelector('.popup.open');
        if (popupActive) {
            popupClose(popupActive, false);
        } else {
            bodyLock();
        }
        curentPopup.classList.add('open');
        curentPopup.addEventListener('click', function (e) {
            if (!e.target.closest('.popup__content')) {
                popupClose(e.target.closest('.popup'));
            }
        });
    }
}
function popupClose(popupActive, doUnlock = true) {
    if (unlock) {
        popupActive.classList.remove('open');
        if (doUnlock) {
            bodyUnlock();
        }
    }
}

function bodyLock() {
    body.classList.add('lock');

    unlock = false;
    setTimeout(function () {
        unlock = true;
    }, timeout);
}

function bodyUnlock() {
    setTimeout(function () {
        body.classList.remove('lock');
    }, timeout);

    unlock = false;
    setTimeout(function () {
        unlock = true;
    }, timeout);
}

document.addEventListener('keydown', function (e) {
    if (e.which === 27) {
        const popupActive = document.querySelector('.popup.open');
        popupClose(popupActive);
    }
});

Answer 1

Убрать из контейнера модального окна контейнер меню

Я модальные окна делаю вот так:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
    .main{
        overflow: hidden;
        overflow-y: auto;
        background-color: rgb(235, 235, 235);
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    .container_content{
        box-shadow: 0px 0px 15px 0px rgb(209, 209, 209);
        background-color: white;
        border-radius: 20px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: 500px;
        height: 500px;
    }

    .button_open_menu{
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 18px;
        cursor: pointer;
        border-radius: 50%;
        border: 0;
        padding: 0;
        position: absolute;
        top: 20px;
        right: 0;
        left: 0;
        margin-right: auto;
        margin-left: auto;
        width: 80px;
        height: 80px;
    }

    .button_open_modal{
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 18px;
        cursor: pointer;
        border-radius: 50%;
        border: 0;
        padding: 0;
        position: absolute;
        bottom: 20px;
        right: 0;
        left: 0;
        margin-right: auto;
        margin-left: auto;
        width: 80px;
        height: 80px;
    }

    .container_menu{
        display: none;
        text-align: center;
        padding: 10px;
        box-shadow: 0px 0px 15px 0px rgb(209, 209, 209);
        background-color: white;
        border-radius: 20px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin-top: auto;
        margin-bottom: auto;
        margin-right: auto;
        margin-left: auto;
        width: 90%;
        height: 85%;
        z-index: 3;
    }

    .container_modal{
        display: none;
        text-align: center;
        padding: 10px;
        box-shadow: 0px 0px 15px 0px rgb(209, 209, 209);
        background-color: white;
        border-radius: 20px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin-top: auto;
        margin-bottom: auto;
        margin-right: auto;
        margin-left: auto;
        width: 90%;
        height: 85%;
        z-index: 3;
    }

    .close_menu{
        cursor: pointer;
        line-height: 250%;
        background-color: rgb(219, 219, 219);
        border-radius: 50%;
        padding: 0;
        border: 0;
        position: absolute;
        right: 5px;
        top: 5px;
        width: 40px;
        height: 40px;
    }

    .close_modal{
        cursor: pointer;
        line-height: 250%;
        background-color: rgb(219, 219, 219);
        border-radius: 50%;
        padding: 0;
        border: 0;
        position: absolute;
        right: 5px;
        top: 5px;
        width: 40px;
        height: 40px;
    }

    </style>
    <body>
        <div class="main">
            <div class="container_content">
                <div class="container_menu"> MENU <button class="close_menu">✖</button></div>
                <div class="container_modal"> MODAL <button class="close_modal">✖</button></div>
                <button class="button_open_menu">OPEN MENU</button>
                <button class="button_open_modal">OPEN MODAL</button>
            </div>
        </div>
    </body>
    <script>
         var butopenmodal = document.querySelector('.button_open_modal');
         var butclosemodal = document.querySelector('.close_modal');
         var butopenmenu = document.querySelector('.button_open_menu');
         var butclosemenu = document.querySelector('.close_menu');
         var containermenu = document.querySelector('.container_menu');
         var containermodal = document.querySelector('.container_modal');

         butopenmenu.onclick = (e) => {
            containermenu.style.display = "block";
         }

         butopenmodal.onclick = (e) => {
            containermodal.style.display = "block";
         }

         butclosemenu.onclick = (e) => {
            containermenu.style.display = "none";
         }

         butclosemodal.onclick = (e) => {
            containermodal.style.display = "none";
         }

    </script>
    </html>

БЛОГ НА HUSL

Как не закрывать мобильное меню , когда закрываею модальное окно?

Ответы (1 шт):