0

Написал код. Выполняет задачу открытия модального окна, закрытие и закрытие при нажатии вне данного элемента.

Проблема заключается в не отработанном событии btnActionClose.onclick = btnAction;, оно не отрабатывает.

Как можно грамотно решить данную проблему, используя JavaScript?

    btnActionOpen.onclick = btnAction;
    btnActionClose.onclick = btnAction;

    modalItem.onclick = function (e) {
        if(e.target !== modalItemContent)
            btnAction();
    }

    function btnAction(){
        var modalItem = document.getElementById("modalItem");
        modalItem.classList.toggle("activity");
    }
#modalItem{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    margin: auto;
    visibility: hidden;
    opacity: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.10);
    transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 999;
}
#modalItemContent{
    vertical-align: middle;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
    background-color: rgb(255,255,255);
    margin-bottom: 20px;
    padding: 50px;
    width: 500px;
}
#modalItem.activity{
    visibility: visible;
    opacity: 1;
}
<button class="buy" id="btnActionOpen">Open</button>

<div id="modalItem">
    <div id="modalItemContent">
       <button id="btnActionClose">Close</button>
    </div>
</div>

Только не нужно путать JQuery c JavaScript.

1 ответ 1

2

btnActionOpen.onclick = btnAction;
btnActionClose.onclick = btnAction;

modalItem.onclick = function(e) {
  if (!e.target.closest('#modalItemContent')) {
    btnAction();
  }
}

function btnAction() {
  var modalItem = document.getElementById("modalItem");
  modalItem.classList.toggle("activity");
}
#modalItem {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  margin: auto;
  visibility: hidden;
  opacity: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.10);
  transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 999;
}

#modalItemContent {
  vertical-align: middle;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  background-color: rgb(255, 255, 255);
  margin-bottom: 20px;
  padding: 50px;
  width: 500px;
}

#modalItem.activity {
  visibility: visible;
  opacity: 1;
}
<button class="buy" id="btnActionOpen">Open</button>

<div id="modalItem">
  <div id="modalItemContent">
    <button id="btnActionClose">Close</button>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.