У меня есть такой участок разметки (сразу оговорюсь, что разметку делал не я, ее мне в качестве темплейта предоставили, и плясать нужно от нее):
<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>
но никакого плавного появления не происходит.
Подскажите, где я что не так сделал?