Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a bootstrap modal fade in from the bottom?

How do you make a modal fade in from the bottom to the top?

By default it starts at the top of the page. I want to get it down in the footer.

Is there a class of its own for this? I modify the CSS?

How to do this?

<div class="modal fade bs-example-modal-lg" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</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>
like image 948
GtGtGt Avatar asked Dec 08 '15 19:12

GtGtGt


People also ask

How do you make a modal disappear after clicking?

There are few ways to close modal in Bootstrap: click on a backdrop, close icon, or close button. You can also use JavaScript hide method. Click the button to launch the modal. Then click on the backdrop, close icon or close button to close the modal.

What is modal fade in Bootstrap?

The .fade class adds a transition effect which fades the modal in and out. Remove this class if you do not want this effect. The attribute role="dialog" improves accessibility for people using screen readers.

How do I make a Bootstrap modal scrollable?

Bootstrap 4.3 added new built-in scroll feature to modals. This makes only the modal-body content scroll if the size of the content would otherwise make the page scroll. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class. Save this answer.

What is backdrop in modal?

The backdrop option specifies whether the modal should have a dark overlay (the background color of the current page) or not.


1 Answers

By default, here is the styling that is used to make the modal fade in from the top:

.modal.fade .modal-dialog {
  transform: translate3d(0, -25%, 0);
}
.modal.in .modal-dialog {
  transform: translate3d(0, 0, 0);
}

If you want it to fade in from the bottom, change the -25% value to something like 100vh or 100%:

Example Here

.modal.fade .modal-dialog {
  transform: translate3d(0, 100vh, 0);
}

.modal.in .modal-dialog {
  transform: translate3d(0, 0, 0);
}
like image 91
Josh Crozier Avatar answered Oct 16 '22 12:10

Josh Crozier