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

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

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

有它自己的类吗？我修改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>

最佳答案

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

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

关于html - 如何使引导模式从底部淡入？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34164889/