模态弹出过渡-从按钮弹出

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，这里有一些很好的信息。

基本上，你想要捕获你点击的按钮的位置，并设置模态的位置(或渐隐开始位置，无论你之后的哪个)的值。

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

显然，position:['middle',20],(直接来自上面的链接!)是一个非常简单的方法来完成这一点-但再次，这是jQuery，不是CSS。