Question

我对模态弹出窗口的转换有疑问。弹出窗口来自一个按钮。我目前正在使用下面的CSS，这还不错。但有没有办法让转换看起来像我刚刚按下的按钮弹出模态？仅供参考，我只是与css中介。我需要一些JS吗？

.modal.fade .modal-dialog {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
    top: 300px;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.modal.fade.in .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
    opacity: 1;
}

Answer 1

如果你想要一个小jQuery，那么有一些很好的信息here。

基本上，您想要捕捉您点击的按钮的位置，并将模态的位置（或淡入淡出开始位置，无论您之后的任何一个）设置为该值。

我不确定这是否可以在CSS中完成，但在JS和jQuery之间你可以相对容易地找到解决方案。您可以在按钮中添加onClick侦听器，并以此方式捕获所需的数据。

显然，position:['middle',20],（直接来自上面的链接！）是一种非常简单的方法来实现这一点 - 但同样，这是jQuery，而不是CSS。

模态弹出过渡 - 来自Button的弹出窗口？

1 个答案: