I'm looking to have two hidden modal windows that can slide in from the left and right edges of the page. In my current setup, the left modal slides in from the right instead of sliding out from the left margin as desired. You can view the issue in the fiddle I've created here.
When attempting to make the left modal slide in from the correct direction, I lose the slide-out effect entirely.
#rightModal .modal-dialog-slideout {
min-height: 100%;
margin: 0 0 0 auto;
background: #fff;
}
#rightModal .modal.fade .modal-dialog.modal-dialog-slideout {
-webkit-transform: translate(100%, 0)scale(1);
transform: translate(100%, 0)scale(1);
}
#rightModal .modal.fade.show .modal-dialog.modal-dialog-slideout {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
display: flex;
align-items: stretch;
-webkit-box-align: stretch;
height: 100%;
}
#rightModal .modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
overflow-y: auto;
overflow-x: hidden;
}
#rightModal .modal-dialog-slideout .modal-content {
border: 0;
}
#rightModal .modal-dialog-slideout .modal-header,
.modal-dialog-slideout .modal-footer {
height: 69px;
display: block;
}
#rightModal .modal-dialog-slideout .modal-header h5 {
float: left;
color: blue;
}
#leftModal .modal-dialog-slideout {
min-height: 100%;
margin: 0 auto 0 0;
background: #fff;
}
#leftModal .modal.fade .modal-dialog.modal-dialog-slideout {
-webkit-transform: translate(-100%, 0)scale(1);
transform: translate(-100%, 0)scale(1);
}
#leftModal .modal.fade.show .modal-dialog.modal-dialog-slideout {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
display: flex;
align-items: stretch;
-webkit-box-align: stretch;
height: 100%;
}
#leftModal .modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
overflow-y: auto;
overflow-x: hidden;
}
#leftModal .modal-dialog-slideout .modal-content {
border: 0;
}
#leftModal .modal-dialog-slideout .modal-header,
.modal-dialog-slideout .modal-footer {
height: 69px;
display: block;
}
#leftModal .modal-dialog-slideout .modal-header h5 {
float: left;
color: red;
}
Any suggestions on how to maintain the slide-out effect while keeping the positions of both modals intact?