Modal to slide up from bottom in Bootstrap 4
13,425
Since you don't want to add another framework on top of Bootstrap 4, I just changed the CSS :
.animate-bottom {
position: relative;
animation: animatebottom 0.4s;
}
@keyframes animatebottom {
from {
bottom: -300px;
opacity: 0;
}
to {
bottom: 0;
opacity: 1;
}
}
Then just add the class animate-bottom
after the modal-content
in the <div>
<button type="submit" class="btn btn-block btn-default footer__btn" data-toggle="modal" data-target="#myModal2"> Open Modal</button>
<div class="modal fade animate" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content animate-bottom"> <!-- Here you have the juicy hahah -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"> ABOUT </h4>
</div>
<div class="modal-body">
CONTEÚDO
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here's the Fiddle :
Make sure you make it cross-browser, but this is just the base of the animation, hope it'll fit your request.
Author by
Elaine Byene
Updated on June 04, 2022Comments
-
Elaine Byene almost 2 years
I'm trying to set up a modal to slide up from bottom but there's no tutorial for Bootstrap 4 that actually works. Here's an attempt:
HTML
<button type="submit" class="btn btn-block btn-default footer__btn" data-toggle="modal" data-target="#myModal2"> Open Modal</button> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> Body of the modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
CSS
.modal.fade .modal-dialog { -webkit-transform: translate(0,100%); -ms-transform: translate(0,100%); -o-transform: translate(0,100%); transform: translate(0,100%); }
-
Elaine Byene almost 5 yearsThanks but this loads a different CSS file and doesn't slide up from below.
-
mattdaspy almost 5 yearsYou can change w3-animate-top to w3-animate-bottom, the complete list of W3CSS codes are here : w3schools.com/w3css/w3css_modal.asp
-
Elaine Byene almost 5 yearsThank you once again but like I said, I'm not looking to add another framework on top of bootstrap 4.