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");
            }
        }
    });
  • Вопрос задан
  • 52 просмотра
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Потому что вы проверяете на пустое поле или нет. А в тот момент, когда дело доходит до скрипта эти поля никогда не пустые, потому что об этом позаботился браузер проверив required.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
от 80 000 до 200 000 ₽
Sveak Барнаул
от 50 000 ₽
Libertex Group Барнаул
от 70 000 до 120 000 ₽
30 мая 2020, в 20:00
1000 руб./за проект
30 мая 2020, в 19:49
2000 руб./за проект