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

Answer 2

在任何地方都找不到答案，所以发现5个小时后，我发现最初我们需要将高度设置为0％，并且在显示模态时，我们需要设置模态的实际高度，并且我们需要在关闭此模式时要做的事情。例如-在我的情况下，我将模式的名称命名为modal-add-popup，这是实现该模式的CSS

将初始高度设置为0

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

出现模态时将高度设置为75％

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

模式关闭时将高度设置为0％

.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.

显示模态（进入视图）时，.in和.show是两个添加到.modal元素的新闻类

//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;

如何让bootstrap模式从底部淡入？

3 个答案: