Question

我正在使用Bootstrap的模态进行一系列评论。所以我在列表中排列了一堆模态，并在用户查看当前模式后显示下一个模态。

问题：如何更改模态以使当前模式向左滑动，新模式从右侧滑入？

我希望这是一个可以应用于这些特定模态的新类。我在网站的其他地方使用模态我喜欢Bootstrap的默认行为。

非常感谢任何帮助，谢谢！

修改

好的，不发布任何代码是愚蠢的，所以这里是一个bootply：http://www.bootply.com/1BADCJo5FL#

诀窍在于CSS标记，您可以在此处使用right: 25%;更改默认起始位置...

.modal {
  position: fixed;
  top: 0;
  right: 25%;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

...以及一旦用变换显示它会如何移动

.modal.in .modal-dialog {
  -webkit-transform: translate(25%, 0);
      -ms-transform: translate(25%, 0);
       -o-transform: translate(25%, 0);
          transform: translate(25%, 0);
}

现在这很有趣：bootstrap只有modal.in的CSS标记，而没有modal.out。它似乎只是回归它的方式。我不确定这只是默认的CSS行为还是什么....

所以这就是我想要的一半，但是让事情变得更像是很好......我猜一个旋转木马。

Answer 1

我希望这就是你要找的东西：）

我刚刚更改了jquery中的几个代码。在关闭模态时添加一个名为close的类。

$(document).ready(function() {

  $('#show_normal').on('click', function(e) {
    $('#myModal').modal('show');
    $('#myModal').removeClass('out');
  });

  $('#hide_normal').on('click', function(e) {
    $('#myModal').modal('hide');
    $('#myModal').addClass('out');
  });

}）;

并在css中添加了一些代码

.modal.fade.out {    
   right: -25%;
   left: auto;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
       -o-transition: opacity 0.3s linear, right 0.3s ease-out;
          transition: opacity 0.3s linear, right 0.3s ease-out;
 }

您可以在http://www.bootply.com/bz1VioVHpI

上看到现场演示

Bootstrap模态：侧向滑入和滑出

1 个答案: