我需要从左侧滑动打开引导模式。 但是,该功能只能在 Bootstrap 3 上使用,不能在 Bootstrap 4 上使用。
Bootstrap 3 版本。 : https://codepen.io/bootpen/pen/jbbaRa , Bootstrap 4 版本。 : https://codepen.io/rae0724/pen/yKZjax
<div class="modal left fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
.modal.left .modal-dialog {
position: fixed;
margin: auto;
width: 320px;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.left .modal-content {
height: 100%;
overflow-y: auto;
}
.modal.left .modal-body {
padding: 15px 15px 80px;
}
.modal.left.fade .modal-dialog {
left: -320px;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left.fade.in .modal-dialog {
left: 0;
}
最佳答案
在 Bootstrap 4 中,.in
已更改为 .show
。自定义 CSS 应该是:
.modal.left.fade.show .modal-dialog {
left: 0;
}
此外,Codepen 已损坏,因为未包含最新的 Bootstrap 4 和 popper.js
。
关于jquery - Bootstrap 4 模态从左滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49752917/