如何从页面的左侧和右侧滑动模态窗口 [英] How to slide modal windows from left and right of page

问题描述

我希望隐藏两个模态窗口，并切换它们从左侧滑入，另一个从右侧滑入.但是，在我创建的小提琴中，左侧和右侧的模态窗口与页面的左侧和右侧正确对齐.左侧模态从右侧滑入而不是滑出滑出"从左边距.在这里小提琴

I wish to have two modal windows hidden, and toggle them to slide in from the left, and another to slide in from the right. In the fiddle I have created, the left, and right, modal windows align correctly to the left and right of the page, however. The left modal slides in from right instead of sliding "out" from the left margin. Fiddle Here

当我尝试让左侧模态窗口从左侧滑动时，我失去了滑出效果.

When I try to have the left modal window slide from the left, I lose the slide-out effect.

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

如何保持滑出效果，保持两个模态的位置?

How to maintain the slide-out effect, and maintain positions of the two modals?

推荐答案

你需要在 x-axis 上平移 .modal-dialog -100%未显示.

You need to translate .modal-dialog -100% on the x-axis when the modal is not shown.

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

The modal has .show class when it is displayed. Use the :not() CSS pseudo-class to select the modal in its hidden state.

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

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class. - 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/

这篇关于如何从页面的左侧和右侧滑动模态窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！