2015-10-01 78 views
1

我对模态弹出窗口的转换有疑问。弹出窗口来自一个按钮。我目前使用下面的CSS,这并不坏。但是有没有什么办法让转换看起来像是我刚刚按下的按钮弹出的模式?仅供参考,我只是与css中介。我需要一些JS吗?Modal Popup Transition - 弹出按钮?

.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; 
} 

回答

1

如果你想要一个小小的jQuery,有一些很好的信息here

基本上,你想捕捉你点击的按钮的位置,并将该模式​​的位置(或淡入开始位置,无论你在哪个位置)设置为该值。

我不确定这是否可以在CSS中完成,但是在JS和jQuery之间,您可以相对轻松地找到解决方案。您可以将一个onClick监听器添加到您的按钮并捕获您需要的数据。

显然,position:['middle',20],(直接取自上面的链接!)是一个非常简单的方法来实现这一点 - 但同样,这是jQuery,而不是CSS。

+0

感谢您的查询 –