01
Июл
2020

Событие onclick не отрабатывает

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

Проблема заключается в не отработанном событии 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.

Источник: https://ru.stackoverflow.com/questions/1147670/%D0%A1%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B5-onclick-%D0%BD%D0%B5-%D0%BE%D1%82%D1%80%D0%B0%D0%B1%D0%B0%D1%82%D1%8B%D0%B2%D0%B0%D0%B5%D1%82

Share

Тебе может это понравится...

Добавить комментарий