developerV
@developerV

Почему не могу открыть модальное окно?

Если я закрываю модальное окно клавишей Esc, то повторно я его могу открыть, но если я закрываю модалку кликом вне области(overlay), то больше оно не открывается. Видимо дело в том что, я навешиваю в таком случае стили display:none; Как исправить?

<section class="modal">
        <form class="size" action="https://echo.htmlacademy.ru">
            <h3 class="size__title">Добавить<br> в коризину</h3>
            <fieldset class="size__fieldset">
                <legend class="size__legend">Выберите размер:</legend>
                <ul class="size__list">
                    <li class="size__item">
                        <input class="visually-hidden size__input" type="radio" name="product-size" id="small" value="s" checked="">
                        <label class="size__label" for="small">s</label>
                    </li>
                    <li class="size__item">
                        <input class="visually-hidden size__input" type="radio" name="product-size" id="medium" value="m">
                        <label class="size__label" for="medium">m</label>
                    </li>
                    <li class="size__item">
                        <input class="visually-hidden size__input" type="radio" name="product-size" id="large" value="l">
                        <label class="size__label" for="large">l</label>
                    </li>
                </ul>
                <button type="submit" class="button size__button">Добавить</button>
            </fieldset>
        </form>
    </section>
    <div class="overlay"></div>


.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.7);
    z-index: 1;
}

.modal {
    display: none;
    position: absolute;
    background: #fafafa;
    width: 320px;
    padding: 33px 30px 46px;
    top: 1046px;
    left: 50%;
    margin-left: -160px;
    box-shadow: inset 0 0 0 1px #e5e5e5, 0 6px 10px 0 rgba(0,0,0,.1);
    z-index: 2;
}
@keyframes bounce {
    0% {
        transform: translateY(-2000px);
    }

    70% {
        transform: translateY(30px);
    }

    90% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.modal-show {
    display: block;
    animation: bounce 0.6s;
}

.overlay-show {
    display: block;
}


link.addEventListener("click", function(evt) {
        evt.preventDefault();
        popup.classList.add("modal-show");
        modalOverlay.classList.add("overlay-show");
    });
    window.addEventListener("keydown", function(evt) {
        if (evt.keyCode === 27) {
            evt.preventDefault();
            if (popup.classList.contains("modal-show")) {
                popup.classList.remove("modal-show");
            }
            if (modalOverlay.classList.contains("overlay-show")) {
                modalOverlay.classList.remove("overlay-show");
            }
        }
    });
    $(".overlay").click(function(e) {
    if($(e.target).closest(".modal").length==0) $(".overlay").css("display","none"),$(".modal").css("display","none");

  });
  • Вопрос задан
  • 72 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
R52.RU Нижний Новгород
от 30 000 до 50 000 руб.
Star-staff Москва
от 100 000 до 150 000 руб.
Sveak Барнаул
от 50 000 руб.