Как сделать закрытие модального окна?

Question

[alehandry]

Мне нужно было сделать так, чтобы по нажатию кнопки открывалось модальное окно. Само модальное окно я сделал в другом файле, чтобы потом через тег ?php добавлять это модальное окно к другим кнопкам.

Документ с кнопкой:

<div id="open-modal-btn" class="banner-text-btn">
          <div><button>Оставить заявку</button></div>
          <?php require "button.php"?>
          <script src="js/modal-application.js"></script>
        </div>

Документ модального окна

<div id="modal-application" class="modal">
    <div class="modal-box">
        <button class="modal-close-btn" id="close-modal-application">
        <svg width="23" height="25" viewBox="0 0 23 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.09082 0.03125L22.9999 22.0294L20.909 24.2292L-8.73579e-05 2.23106L2.09082 0.03125Z"
                        fill="#333333" />
                    <path d="M0 22.0295L20.9091 0.0314368L23 2.23125L2.09091 24.2294L0 22.0295Z" fill="#333333" />
                </svg>
        </button>
        <h1>Заявка</h1>
        <div cr-field="name" class="is-text">
            <div class="name">
                Имя *
            </div>
            <div class="input">
                <input type="text" il-action="listen" autocomplete="name" class="form-control" value="">
            </div>
        <div cr-field="phone" class="is-text">
            <div class="name">
                Номер телефона *
            </div>
            <div class="input">
                <input type="text" il-action="listen" autocomplete="tel" class="form-control" value="">
            </div>
        </div>
        <div cr-field="text" class="is-text">
            <div class="name">
                Город
            </div>
            <div class="input">
                <input type="text" il-action="listen" class="form-control cr-field-input" value="">
            </div>
            </div>
        </div>
        <script src="js/modal-application.js"></script>
<style>
@font-face {
  font-family: "TTNorms";
  src: url(font/TTNorms-Medium.otf);
}
@font-face {
  font-family: "OpenSans";
  src: url(font/OpenSans.ttf);
}
* {
  box-sizing: border-box;
  font-family: "OpenSans";
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  color: black;
}
li {
  list-style-type: none;
}
.container {
  width: 1130px;
  margin: 0 auto;
}
.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 99998;
    background-color: rgba(0, 0, 0, .3);
    display: grid;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s, visibility .4s;
}
.modal-box {
    position: relative;
    max-width: 500px;
    padding: 45px;
    z-index: 1;
    background-color: white;
    margin: 30px 15px;
    transform: scale(0);
    transition: transform .8s;
}
.modal-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background-color: transparent;
    padding: 5px;
}
.modal-close-btn svg path {
    transition: fill .4s;
}

.modal-close-btn:hover svg path {
    fill: rgb(255, 203, 87);
}

.modal-close-btn:active svg path {
    fill: rgb(186, 53, 0);
}
.modal.open {
    visibility: visible;
    opacity: 1;
}
.modal.open .modal-box {
    transform: scale(1);
}
</style>

Вот создан JavaScript, который как раз таки отвечает за открытие и закрытие модального окна. Окно открывается, закрывается по нажатию Esc, но не работает закрытие по кнопке и нажатию на пустую область.

document.getElementById("open-modal-btn").addEventListener("click",function() {
    document.getElementById("modal-application").classList.add("open")
})

document.getElementById("close-modal-application").addEventListener("click",function() {
    document.getElementById("modal-application").classList.remove("open")
})
// Закрыть модальное окно при нажатии на Esc
window.addEventListener('keydown', (e) => {
    if (e.key === "Escape") {
        document.getElementById("modal-application").classList.remove("open")
    }
});

// Закрыть модальное окно при клике вне его
document.querySelector("#modal-application .modal-box").addEventListener('click', event => {
    event._isClickWithInModal = true;
});
document.getElementById("modal-application").addEventListener('click', event => {
    if (event._isClickWithInModal) return;
    event.currentTarget.classList.remove('open');
});

Comments

[iljaGolubev]

1. Модалки обычно держат в body
2. Модалку лучше не вкладывать в div затенения контента (backdrop)

подглядеть

function initModal() {
  const modalApp = document.getElementById("modal-application");
  // чтобы не было коллизий из-за -того, что модалка и бэкдроп вложены в кнопку открывающую из
  // вообще стандарт модалок - в body. иначе это попап
  document.body.appendChild(modalApp);

  // из-за того что окно модалки вложено в бэкдроп нужно запретить проброс события
  // на родителя (бэкдроп)  при клике на модалку
  modalApp.firstElementChild.addEventListener("click", e =>e.stopPropagation());

  const closeBtn = modalApp.getElementsByClassName("modal-close-btn")[0];

  const close = () => modalApp.classList.remove("open");
  const open = () => modalApp.classList.add("open");

  modalApp.addEventListener("click", close);
  closeBtn.addEventListener("click", close);

  window.addEventListener("keydown", e => { if (e.key === "Escape") close(); });

  return { open, close };
}

var myModal = initModal();
document.getElementById("open-modal-btn").addEventListener("click", myModal.open);

Answer 1

[Сергей delphinpro]

Оно нормально закрывается. Просто тут же открывается снова =)
Зачем вы его внутрь кнопки засунули?
Поменяйте

<div id="open-modal-btn" class="banner-text-btn">
          <div><button>Оставить заявку</button></div>
</div>

          <?php require "button.php"?>
          <script src="js/modal-application.js"></script>

Ну или селектор перенесите, по которому окно открывается

<div class="banner-text-btn">
          <div><button id="open-modal-btn">Оставить заявку</button></div>
          <?php require "button.php"?>
          <script src="js/modal-application.js"></script>
</div>

Comments

[alehandry]

спасибо огромное