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

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],（直接取自上面的 link！）是实现此目的的一种非常简单的方法 - 但同样，这是 jQuery，而不是 CSS.

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

Modal Popup Transition - Popup from Button?

css

jquery

transition

css-transitions