Question

我希望隐藏两个模式窗口，并切换它们以从左侧滑入，另一个从右侧滑入。在我创建的小提琴中，左右模式窗口正确地与页面的左右对齐。左模式从右滑入，而不是从左边缘滑出。 Fiddle Here

当我尝试让左侧的模式窗口从左侧滑动时，我会失去滑出效果。

#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;
}

如何保持滑出效果以及如何保持两个模态的位置？

Answer 1

未显示模式时，您需要在.modal-dialog -100%上翻译x-axis。

模态在显示时具有.show类。使用:not() CSS伪类来选择处于隐藏状态的模式。

:not() CSS伪类表示与选择器列表。因为它可以防止特定项目选择，它被称为否定伪类。 -https://developer.mozilla.org

#leftModal.modal.fade:not(.show) .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(-100%,0)scale(1);
    transform: translate(-100%,0)scale(1);
}

https://jsfiddle.net/r25uphq3/

如何从页面的左侧和右侧滑动模式窗口

1 个答案: