developerV
@developerV

Почему не работает встряска модального окна?

<section class="modal modal-login">
        <h2>Личный кабинет</h2>
        <p>Введите свой логин и пароль</p>
        <form class="login-form" method="post">
            <p>
                <label class="visually-hidden" for="user-login">Логин</label>
                <input id="user-login" class="login-icon-user" type="text" name="login" placeholder="Логин" required>
            </p>
            <p>
                <label class="visually-hidden" for="user-password">Пароль</label>
                <input id="user-password" class="login-icon-password" type="password" name="password" placeholder="Пароль" required>
            </p>
            <p class="login-help">
                <label class="login-checkbox">
                    <input type="checkbox" name="remember" class="visually-hidden">
                    <span class="checkbox-indicator"></span>
                    Запомните меня
                </label>
                <a href="#" class="restore">Я забыл пароль!</a>
            </p>
            <button class="button" type="submit">Войти</button>
        </form>
        <button class="modal-close" type="button"><span class="visually-hidden">Закрыть</span></button>
    </section>


.modal {
    position: absolute;
    display: none;
    color: #000;
    background-color: #f7f4f1;
    background-image: url(../img/bg-main.jpg);
    background-position: 0 0;
    background-repeat: repeat;
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.7);
    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;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-10px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(10px);
    }
}

.modal-error {
    animation: shake 0.6s;
}


var link = document.querySelector(".login-link");
    var popup = document.querySelector(".modal-login");
    var close = document.querySelector(".modal-close");
    var form = popup.querySelector("form");
    var login = popup.querySelector("[name=login]");
    var password = popup.querySelector("[name=password]");
    var storage = localStorage.getItem("login");


    link.addEventListener("click", function(evt) {
        evt.preventDefault();
        popup.classList.add("modal-show");
        if (storage) {
            login.value = storage;
            password.focus();
        } else {
            login.focus();
        }
    });
    close.addEventListener("click", function(evt) {
        evt.preventDefault();
        popup.classList.remove("modal-show");
        popup.classList.remove("modal-error");
    });
    form.addEventListener("submit", function(evt) {
        if (!login.value || !password.value) {
            evt.preventDefault();
            popup.classList.add("modal-error");
        } else {
            if (isStorageSupport) {
                localStorage.setItem("login", login.value);
            }
        }
    });

    window.addEventListener("keydown", function(evt) {
        if (evt.keyCode === 27) {
            evt.preventDefault();

            if (popup.classList.contains("modal-show")) {
                popup.classList.remove("modal-show");
            }
        }
    });
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Потому что вы проверяете на пустое поле или нет. А в тот момент, когда дело доходит до скрипта эти поля никогда не пустые, потому что об этом позаботился браузер проверив required.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы