J'ai besoin que le modal bootstrap soit ouvert par une diapositive à partir de la gauche. Cependant, la fonction ne peut fonctionner que sur Bootstrap 3 mais pas Bootstrap 4.
Bootstrap 3 ver. : https://codepen.io/bootpen/pen/jbbaRa , Bootstrap 4 ver.: https://codepen.io/rae0724/ stylo/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;
}
Dans Bootstrap 4 , .in
est devenu .show
. Le CSS personnalisé doit être:
.modal.left.fade.show .modal-dialog {
left: 0;
}
En outre, le Codepen a été rompu car le dernier Bootstrap 4 et popper.js
n'était pas inclus.