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

【问题标题】：How to make a bootstrap modal fade in from the bottom?如何使引导模式从底部淡入？
【发布时间】：2016-03-13 21:42:22
【问题描述】：

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

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

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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);
}

【讨论】：

经过一些修改，我得到了我想要的！非常感谢
如果您搜索 Bootstrap 4 的解决方案，您应该将“.in”类更改为“.show”。还要添加/更新一个过渡属性，例如“transition: all 0.15s ease-out;”

【解决方案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;
}

【讨论】：

【解决方案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;

【讨论】：