如何使引导模式从底部淡入？

Question

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>

Answer 1

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);
}

Answer 2

Could not find an answer anywhere, so after 5 hours of finding I found out that initially we need to set the height to 0% and when we show the modal we need to set the actual height of the modal and same we need to do at the time of closing this modal. For eg - In my case I have given the name of the modal as modal-add-popup and here is the CSS for making it happen

Setting the initial height to 0

.modal-add-popup {
  height: 0;
}

Setting the height to 75% when modal comes up

.modal.fade.show .modal-add-popup {
  height: 75.5%;
  transition: height 0.3s;
}

Setting the height to 0% when modal close down

.modal.fade .modal-add-popup {
  height: 0px;
  transition: height 0.3s !important;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: none;
  transform: none;
}

Answer 3

A general approach towards this problem:

Initially the modal will not be in view:
'.modal.fade' is the selector (.fade is bootstrap class) which you can use to give your style.
 

.modal.fade .modal-dialog {
  transform: translate3d(0, 100vh, 0);
}
//By using 100vh we position it below the screen.

When the modal is shown(comes into view) .in and .show are two news classes that get added to .modal element

//By making the earlier 100vh to 0 we position it on the screen at top=0.

//Bootstrap 3
.modal.in .modal-dialog {
  transform: translate3d(0, 0, 0);
}

//Bootstrap 4
.modal.show .modal-dialog {
  transform: translate3d(0, 0, 0);
}

//Note: To delay the transition you can add rule 
transition: transform 0.5s ease-out;