0

У меня есть такой участок разметки (сразу оговорюсь, что разметку делал не я, ее мне в качестве темплейта предоставили, и плясать нужно от нее):

<div class="modal-view-bg">
    <div class="modal-view-container">
        <div id="login_modal" class="modal-view show-modal1 disN">
            <div class="modal-title">
                <div>LOGIN</div>
                <a href="/"><span class="modal-close"></span></a>
            </div>
            <form method="post" asp-page-handler="Login">
                <input type="email" name="Email" class="input-modal mrB20" placeholder="Email account">
                <input type="password" name="Password" class="input-modal mrB20" placeholder="Password">
                <a href="/Identity/Reset"><span class="btn-modal-text">Reset password</span></a>
                <button class="button-modal color-red">Login</button>
            </form>
        </div>
    </div>
</div>

Контейнер с айдишником id="login_modal" отвечает за некую форму. Появление этой формы происходит путем переключения класса disN в disB

.disN {
    display: none !important;
}

.disB {
    display: block !important;
}

Механика такова, что при загрузке страницы, disN должен сменится в disBи форма анимированно появляется.

я это реализовал с помощью JQuery так:

<script>
    $(document).ready(function () {
        document.getElementById("login_modal").classList.remove("disN");
        document.getElementById("login_modal").classList.toggle("disB");
        $("login_modal").fadeIn("slow");
  });
</script>

но никакого плавного появления не происходит.

Подскажите, где я что не так сделал?

5
  • добавьте Вашу css в вопрос.
    – Denis640Kb
    27 янв 2020 в 8:57
  • @Denis640Kb добавил 27 янв 2020 в 9:02
  • ну так изначально установлен disB а не disN вот toggle его и удаляет 27 янв 2020 в 9:18
  • @ValeraKvip, прошу прощения, это ошибка при копировании на стак, там изначально disN. Сейчас исправлю. 27 янв 2020 в 9:22
  • 1
    $("#login_modal") решетку забыл и убедись что display: block добавилось 27 янв 2020 в 9:26

2 ответа 2

2

Вы можете использовать добавление стиля через jquery Но старайтесь не смешивать js и jquery (В конце пример как надо на jquery)
Например:

    $(document).ready(function () {
        login.onclick = function (){
            document.getElementById("login_modal").classList.remove("disN");
            $('#login_modal').addClass('disB').fadeOut(0).fadeIn(3000);
        };
    });
    .disN {
        display: none !important;
    }
    .disB {
        display: block !important;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-view-bg">
    <div class="modal-view-container">
        <div id="login_modal" class="modal-view show-modal1 disN">
            <div class="modal-title">
                <div>LOGIN</div>
                <a href="/"><span class="modal-close"></span></a>
            </div>
            <form method="post" asp-page-handler="Login">
                <input type="email" name="Email" class="input-modal mrB20" placeholder="Email account">
                <input type="password" name="Password" class="input-modal mrB20" placeholder="Password">
                <a href="/Identity/Reset"><span class="btn-modal-text">Reset password</span></a>
                <button class="button-modal color-red">Login</button>
            </form>
        </div>
    </div>
    <button id="login">Появись!</button>
</div>

Как альтернатива fadeIn Вы можете использовать @keyframes в css.

    $(document).ready(function () {
        login.onclick = function (){
            document.getElementById("login_modal").classList.remove("disN");
            document.getElementById("login_modal").classList.add("disB");
        };
    });
    @keyframes showBlock {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    .disN {
        display: none !important;
    }
    .disB {
        display: block !important;
        animation: showBlock 3s linear forwards;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-view-bg">
    <div class="modal-view-container">
        <div id="login_modal" class="modal-view show-modal1 disN">
            <div class="modal-title">
                <div>LOGIN</div>
                <a href="/"><span class="modal-close"></span></a>
            </div>
            <form method="post" asp-page-handler="Login">
                <input type="email" name="Email" class="input-modal mrB20" placeholder="Email account">
                <input type="password" name="Password" class="input-modal mrB20" placeholder="Password">
                <a href="/Identity/Reset"><span class="btn-modal-text">Reset password</span></a>
                <button class="button-modal color-red">Login</button>
            </form>
        </div>
    </div>
    <button id="login">Появись!</button>
</div>

На jquery:

    $(document).ready(function () {
        $('#login').click(function () {
            $('#login_modal').removeClass('disN');
            $('#login_modal').addClass('disB').fadeOut(0).fadeIn(3000);
        });
    });
    .disN {
        display: none !important;
    }
    .disB {
        display: block !important;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-view-bg">
    <div class="modal-view-container">
        <div id="login_modal" class="modal-view show-modal1 disN">
            <div class="modal-title">
                <div>LOGIN</div>
                <a href="/"><span class="modal-close"></span></a>
            </div>
            <form method="post" asp-page-handler="Login">
                <input type="email" name="Email" class="input-modal mrB20" placeholder="Email account">
                <input type="password" name="Password" class="input-modal mrB20" placeholder="Password">
                <a href="/Identity/Reset"><span class="btn-modal-text">Reset password</span></a>
                <button class="button-modal color-red">Login</button>
            </form>
        </div>
    </div>
    <button id="login">Появись!</button>
</div>

3
  • @MaximLensky Это взято из примера автора. Не гоже переписывать всё.
    – Denis640Kb
    27 янв 2020 в 9:30
  • @MaximLensky было множество случаев когда меня лично за такую самодеятельность наказывали.
    – Denis640Kb
    27 янв 2020 в 9:33
  • @MaximLensky Значит я такой уникальный =((( Добавил пример на чистом jquery в конце. Проверим.
    – Denis640Kb
    27 янв 2020 в 9:40
0

Спасибо всем кто откликнулся, но я разобрался сам. Я неправильно использовал функцию fadeIn

Перписал скрипт так:

$(document).ready(function () {
        document.getElementById("login_modal").classList.remove("disN");
        $("#login_modal").fadeIn(2500, function () {
            document.getElementById("login_modal").classList.toggle("disB")
        });
    });

все заработало.

Ваши решения тоже имеют право на жизнь, но они слишком сложные.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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