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

Question

我对模式弹出窗口的转换有疑问。弹出窗口来自一个按钮。我目前正在使用下面的 css，这还不错。但是有什么方法可以使转换看起来像模态是从我刚按下的按钮弹出的吗？仅供引用，我只是 intermediate 与 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。