.модальное содержание перехода от BS3 BS4 сейчас
Всем привет,
У меня есть bootstrap 3 modal, и я хочу использовать bootstrap 4, чтобы заставить его работать точно так же. Я попробовал тихие несколько различных способов сделать эту работу я пытаюсь использовать что-то вроде методов fadein fadeout и fadetoggle, но в bootstrap4 у них их нет. Я попробовал .modal(показать) и .modal(переключить) Мне просто нужно изменить контент на следующий контент
<p class="text-center"><a href="#" class="btn btn-primary btn-lg" role="button" data-toggle="modal" data-target="#modalLogin">Open Login Modal</a></p>
<div class="modal fade" id="modalLogin" role="dialog" tabindex="-1" aria-labelledby="ModalLabelScreen" aria-hidden="true" ">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header" align="center">
<!-- look for class=img-circle but diff shapes bootstrap-->
<img id="bootstrap_logo" class="rounded mx-auto d-block" src="img/bootstrap-4.png" />
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span class="glyphicon glyphicon-remove" aria-hidden="true">×</span> <!-- TODO glyphicons > -->
</button>
</div>
<!-- Building DIV Form -->
<div id="div-forms">
<!-- Building Login Form -->
<form id="formLogin">
<div class="modal-body">
<div id="loginMsg">
<div id="iconLoginMsg" class="glyphicon glyphicon-chevron-right"></div>
<!--">-->
<!--">-->
<span id="textLoginMsg">Enter your Username and Password.</span>
</div>
<input type="text" id="txtUsername" class="form-control" placeholder="Username (type ERROR for error effect)" required />
<input type="password" id="txtPassword" class="form-control" placeholder="Password" required />
<div class="checkbox">
<label>
<input type="checkbox" />Remember me
</label>
</div>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
</div>
<div>
<button type="button" id="btnLostPassword" class="btn btn-link">Lost Password?</button>
<button type="button" id="btnRegister" class="btn btn-link">Register</button>
</div>
</div>
</form>
<!-- End of Login Form -->
<!-- Building Lost Password Form -->
<form id="formLost" style="display:none;">
<div class="modal-body">
<div id="lostMsg">
<div id="iconLostMsg" class="glyphicon glyphicon-chevron-right"></div>
<span id="textLostMsg">Enter your email address.</span>
</div>
<input type="text" id="txtLostEmail" class="form-control" placeholder="Email (type ERROR for error effect)" required />
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Send</button>
</div>
<div>
<button type="button" id="btnPasswordLogin" class="btn btn-link">Log In</button>
<button type="button" id="btnPasswordRegister" class="btn btn-link">Register</button>
</div>
</div>
</form>
$(function () {
var $formlogin = $("#formLogin");
var $formlost = $("#formLost");
var $formregister = $("#formRegister");
var $divforms = $("#div-forms");
var $modalanimatetime = 300;
var $msganimatetime = 150;
var $msgshowtime = 2000;
$("form").submit(function () {
switch (this.id) {
case "formLogin":
var $lusername = $("#txtUsername").val();
var $lpassword = $("#txtPassword").val();
if ($lusername == "ERROR") {
messageChange($("#loginMsg"), $("#iconLoginMsg"), $("#textLoginMsg"), "error", "glyphicon-remove", "Login error");
} else {
messageChange($("#loginMsg"), $("#iconLoginMsg"), $("#textLoginMsg"), "sucess", "glyphicon-ok", "Login OK");
}
return false;
break;
case "formLost":
var $loemail = $("#txtLostEmail").val();
if ($loemail == "ERROR") {
messageChange($("#lostMsg"), $("#iconLostMsg"), $("#textLostMsg"), "error", "glyphicon-remove", "Send error");
} else {
messageChange($("#lostMsg"), $("iconLostMsg"), $("#textLostMsg"), "success", "glyphicon-ok", "Send OK");
}
return false;
break;
function modalSwitch($oldForm, $newForm) {
var $heightOld = $oldForm.height();
var $heightNew = $newForm.height();
$divforms.css("height", $heightOld);
//$oldForm.modal("hide");
$oldForm.modal("toggle");
//$newForm.modal("show");
$newForm.modal("toggle");
}
$("#btnRegister").click(function () { modalSwitch($formlogin, $formregister); });//{ modalAnimate($formlogin, $formregister); });
$("#btnLostPassword").click(function () { modalAnimate($formlogin, $formlost); });
$("#btnRegisterLogin").click(function () { modalAnimate($formregister, $formlogin); });
$("#btnRegisterLost").click(function () { modalAnimate($formregister, $formlost); });
$("#btnPasswordLogin").click(function () { modalAnimate($formlost, $formlogin); });
$("#btnPasswordRegister").click(function () { modalAnimate($formlost, $formregister); });
function modalAnimate($oldForm, $newForm) {
var $heightOld = $oldForm.height(); var $heightNew = $newForm.height();
$divforms.css("height", $heightOld);
$oldForm.fadeToggle($modalanimatetime, function() {
$divforms.animate({ height: $heightNew }, $modalanimatetime, function() {
$newForm.fadeToggle($modalanimatetime);
});
});
}
function messageFade($msgId, $msgText) {
$msgId.fadeOut($msganimatetime, function() {
$(this).text($msgText).fadeIn($msganimatetime);
});
}
function messageChange($divTag, $iconTag, $textTag, $divClass, $iconClass, $messageText) {
var $oldMsg = $divTag.text();
messageFade($textTag, $messageText);
$divTag.addClass($divClass);
$iconTag.removeClass("glyphicon-chevron-right");
$iconTag.addClass($iconClass + " " + $divClass);
setTimeout(function() {
//calll
messageFade($textTag, $oldMsg);
$divTag.removeClass($divClass);
$iconTag.addClass("glyphicon-chevron-right");
$iconTag.removeClass($iconClass + " " + $divClass);
}, $msgshowtime);
}
Что я уже пробовал:
переключение содержимого в модальном bootstrap3 имеет fadein fadeout fadetoggle bootstrap4 имеет только .modal я пробовал кучу способов заставить его всплывать, но это не правильно содержимое показывает под предыдущим содержимым мне нужно, чтобы он полностью переключился или "переключился", я думаю, что это может быть