如何让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%:

这里的例子

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

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