javascript - 为什么类 modal-side modal-top-right 不能在模态 Bootstrap 上工作？

Question

我的代码是这样的:

<div class="modal fade right" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog modal-side modal-bottom-right">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>Modal Body</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

演示和完整代码:https://codepen.io/trendingnews/pen/yLyVpOK

我添加了类 modal-side modal-bottom-right，但它不起作用。当模式打开时，它不在右下角

我从这里获取引用:https://mdbootstrap.com/docs/jquery/modals/basic/将类 modal-side modal-bottom-right 我该如何解决这个问题？

Answer 1

您链接到的引用文献是 material-design bootstrap 。不是twitter-bootstrap 。 md-boostrap 扩展了 twitter-bootstrap 的功能以使用 material-design style guide 。除了 jQuery 和 bootstrap 的 CSS、JS 之外，您还需要链接 md-bootstrap CSS 和 md-boostrap Javascript:

Javascript CDN:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/js/mdb.min.js"></script>

以及 CSS CDN:

<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet">

Here是一个工作示例。