Почему toggle работает не правильно

Question

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

let btn = document.querySelector('.modal-open')
btn.addEventListener('click',()=>{
    // открывает модалку
    modal.classList.toggle('mmo')
        // слушатель на esc
        document.addEventListener('keydown',e => {
            if(e.code === 'Escape'){
                modal.classList.toggle('mmo')
            }
        },{once:true})
        //слушатель на кнопку внутри modal
        close.addEventListener('click',e => {
            modal.classList.toggle('mmo')
        },{once:true})
})

Answer 1

const modal = document.querySelector('.modal');
const modalOpen = document.querySelector('.modal-open');
const modalClose = document.querySelector('.modal-close');

modalOpen.addEventListener('click', () => {
  modal.classList.add('active');
});

modalClose.addEventListener('click', () => {
  modal.classList.remove('active');
});

document.addEventListener('keydown', e => {
  if (e.code === 'Escape') {
    modal.classList.remove('active')
  }
});

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
}

body {
  font-family: 'Nunito', sans-serif;
  overflow-x: hidden;
  font-size: 30px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 1);
  z-index: 1;
  color: white;
  transform: scale(0);
  transition: transform 0.2s linear;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  right: 2px;
  top: 2px;
  padding: 5px;
  color: var(--firstColor);
  border: 2px solid var(--firstColor);
  background-color: var(--secondColor);
}

.modal-open {
  color: var(--secondColor);
  border: 2px solid var(--secondColor);
  background-color: var(--firstColor);
  padding: 5px;
}

.modal-close,
.modal-open {
  --firstColor: white;
  --secondColor: black;
  display: inline-block;
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  transition-property: color, background-color, border-color;
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
}

.modal-close:hover,
.modal-open:hover {
  --firstColor: black;
  --secondColor: white;
}

.modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

.modal-content {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 20px;
  margin: 40px;
}

.modal.active {
  transform: scale(1);
}

<div class="modal-open">Открыть</div>
<div class="modal">
  <div class="modal-close">Закрыть</div>
  <div class="modal-body">
    <div class="modal-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos perspiciatis inventore iste accusantium adipisci labore tempore ut voluptatum eos debitis fuga, sequi doloribus culpa in odit sint dolor animi beatae eius! Suscipit similique magnam dolores
      architecto aspernatur ipsam nam ratione officiis, labore id eligendi ea corrupti at doloribus saepe, mollitia dignissimos itaque. Dolore soluta quos commodi corrupti nobis facilis voluptates magnam atque, neque delectus pariatur natus nostrum qui
      molestiae mollitia animi explicabo cum non accusantium, quod minus minima porro dolorum blanditiis? Temporibus amet saepe sequi aliquid sit, sunt, odit est, culpa fugit vitae delectus magnam hic molestiae quidem expedita quos.
    </div>
  </div>
</div>

Как удалить слушатели:

const modal = document.querySelector('.modal');
const modalOpen = document.querySelector('.modal-open');
const modalClose = document.querySelector('.modal-close');

modalOpen.addEventListener('click', () => {
  modal.classList.add('active');
  document.addEventListener('keydown', removeModalEscape);
});

modalClose.addEventListener('click', () => {
  modal.classList.remove('active');
  document.removeEventListener('keydown', removeModalEscape);
});

function removeModalEscape(e) {
  if (e.code === 'Escape') {
    modal.classList.remove('active');
    document.removeEventListener('keydown', removeModalEscape);
  }
}

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
}

body {
  font-family: 'Nunito', sans-serif;
  overflow-x: hidden;
  font-size: 30px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 1);
  z-index: 1;
  color: white;
  transform: scale(0);
  transition: transform 0.2s linear;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  right: 2px;
  top: 2px;
  padding: 5px;
  color: var(--firstColor);
  border: 2px solid var(--firstColor);
  background-color: var(--secondColor);
}

.modal-open {
  color: var(--secondColor);
  border: 2px solid var(--secondColor);
  background-color: var(--firstColor);
  padding: 5px;
}

.modal-close,
.modal-open {
  --firstColor: white;
  --secondColor: black;
  display: inline-block;
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  transition-property: color, background-color, border-color;
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
}

.modal-close:hover,
.modal-open:hover {
  --firstColor: black;
  --secondColor: white;
}

.modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

.modal-content {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 20px;
  margin: 40px;
}

.modal.active {
  transform: scale(1);
}

<div class="modal-open">Открыть</div>
<div class="modal">
  <div class="modal-close">Закрыть</div>
  <div class="modal-body">
    <div class="modal-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos perspiciatis inventore iste accusantium adipisci labore tempore ut voluptatum eos debitis fuga, sequi doloribus culpa in odit sint dolor animi beatae eius! Suscipit similique magnam dolores
      architecto aspernatur ipsam nam ratione officiis, labore id eligendi ea corrupti at doloribus saepe, mollitia dignissimos itaque. Dolore soluta quos commodi corrupti nobis facilis voluptates magnam atque, neque delectus pariatur natus nostrum qui
      molestiae mollitia animi explicabo cum non accusantium, quod minus minima porro dolorum blanditiis? Temporibus amet saepe sequi aliquid sit, sunt, odit est, culpa fugit vitae delectus magnam hic molestiae quidem expedita quos.
    </div>
  </div>
</div>

Answer 2


btn.addEventListener('click',(e)=>{
    bool = true
    toggle()
    bool = false
    document.addEventListener('keydown',toggle)
    close.addEventListener('click',toggle)
    
})

function toggle(){
    if(event.target.classList.value == 'close' || event.code == 'Escape'){
        document.removeEventListener('keydown',toggle)
        close.removeEventListener('click',toggle)
    }

    if(bool || event.code == 'Escape' || event.target.classList.value == 'close'){
        modal.classList.toggle('mmo')
    }   
}

БЛОГ НА HUSL

Почему toggle работает не правильно

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