Hello all,
I have a bootstrap 3 modal and I want to use bootstrap 4 to make it work the same way. I have tried quiet a few different ways to make this work I am trying to use something like the fadein fadeout and fadetoggle methods but in bootstrap4 they don’t have these. I tried .modal(show) and .modal(toggle) I just need to change the content to the next content
<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>
<!--">-->
<!--^__i class="fab fa-twitter">-->
<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);
}
What I have tried:
switching contents in a modal bootstrap3 has fadein fadeout fadetoggle bootstrap4 has only .modal I tried a bunch of ways I get it to pop up but its not correct the content shows under the previous content i need it to completely switch or "toggle" i believe it might be
Submit an article or tip