Bootstrap 4 中从底部向上滑动的模态

Question

我正在尝试设置一个从底部向上滑动的模式，但没有针对 Bootstrap 4 的实际教程。这是一个尝试：

JSFiddle 演示

超文本标记语言

<button type="submit" class="btn btn-block btn-default footer__btn" data-toggle="modal" data-target="#myModal2"> Open Modal</button>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        Body of the modal.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

CSS

.modal.fade .modal-dialog {
    -webkit-transform: translate(0,100%);
    -ms-transform: translate(0,100%);
    -o-transform: translate(0,100%);
    transform: translate(0,100%);
}

Answer 1

由于您不想在 Bootstrap 4 之上添加另一个框架，所以我只是更改了 CSS ：

\n\n

.animate-bottom {\n  position: relative;\n  animation: animatebottom 0.4s;\n}\n\n@keyframes animatebottom {\n  from {\n    bottom: -300px;\n    opacity: 0;\n  }\n\n  to {\n    bottom: 0;\n    opacity: 1;\n  }\n}\n

\n\n

然后只需在animate-bottom后面添加类即可modal-content<div>

\n\n

<button type="submit" class="btn btn-block btn-default footer__btn" data-toggle="modal" data-target="#myModal2"> Open Modal</button>\n<div class="modal fade animate" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">\n  <div class="modal-dialog" role="document">\n    <div class="modal-content animate-bottom"> <!-- Here you have the juicy hahah -->\n      <div class="modal-header">\n        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\n        <h4 class="modal-title" id="myModalLabel"> ABOUT </h4>\n      </div>\n      <div class="modal-body">\n        CONTE\xc3\x9aDO\n      </div>\n      <div class="modal-footer">\n        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>\n\n      </div>\n    </div>\n  </div>\n</div>\n

\n\n

这是小提琴：

\n\n

JSFiddle 演示

\n\n

确保使其跨浏览器，但这只是动画的基础，希望它能满足您的要求。

\n