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

【问题标题】：Modal Popup Transition - Popup from Button?模态弹出过渡 - 从按钮弹出？
【发布时间】：2015-12-30 01:53:59
【问题描述】：

我对模态弹出窗口的转换有疑问。弹出窗口来自一个按钮。我目前正在使用下面的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;
}

【问题讨论】：

标签： jquery css css-transitions transition

【解决方案1】：

如果您想使用一点 jQuery，这里有一些很好的信息 here。

基本上，您希望捕获您单击的按钮的位置，并将模态框的位置（或淡入淡出位置，无论您之后的哪个位置）设置为该值。

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

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

【讨论】：