html - 如何使 Bootstrap 模式从底部淡入？

Question

如何让模态从底部淡入到顶部？

默认情况下，它从页面顶部开始。我想把它放在页脚中。

是否有它自己的类？我修改 CSS？

如何做到这一点？

<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

默认情况下，这是用于使模态从顶部淡入的样式:

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

如果您希望它从底部淡入，请将 -25% 值更改为 100vh 或 100% 之类的值:

Example Here

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

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