我有一个模式,可以通过单击此超链接打开:
<a class="link-efekt" data-hover="izrazi zanimanje" href="#izrazi-zanimanje-univerzalno">izrazi zanimanje</a>
点击这个关闭:
<a href="#close" title="Close" class="close" data-hover="zapri">zapri</a>
我正在尝试重新编程 ESC 键以始终返回主屏幕返回主屏幕或关闭模态窗口。
所以我的尝试是使用 window.history.back();
重新编程 ESC 键以转到上一个超链接,但它可以返回多次,我只希望它是能够返回一次——刚好足以关闭模态窗口。这就是我实现 if 语句的原因,它应该检查 #izrazi-zanimanje-univerzalno
是否打开。否则 ESC 键不应该做任何事情。
我还尝试使用 $('#izrazi-zanimanje-univerzalno').hide();
而不是 window.history.back()
(没有 if 语句) 但它完全忽略了我的 CSS 过渡效果,一旦模态被隐藏,它就无法通过单击通常打开它的超链接来重新生成。
<script type="text/javascript">
$(document).keyup(function(e) {
if (e.keyCode == 27) {
if ( $("#izrazi-zanimanje-univerzalno").data('modal').isShown ) {
window.history.back();
}
}
});
</script>
在实现了@crazymatt 提出的第一个建议解决方案后,我在按键时得到了这个控制台输出:
最佳答案
既然您使用的是 JQuery,那么您不能运行淡入淡出动画然后关闭窗口吗?像这样:
$( "#clickme" ).click(function() {
$( "#book" ).fadeTo( "slow" , 0, function() {
// Animation complete now close overlay
});
});
我made a JS.Fiddle with my example但我没有花时间将其应用于叠加层。
关于javascript - 模式关闭,在按钮单击时具有过渡效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43878674/