模式关闭，按钮点击过渡效果

Question

我有一个通过点击这个超链接打开的模态：

<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键，以便始终返回主屏幕返回主屏幕或关闭模态窗口。

所以我的尝试是重新编程ESC键以使用window.history.back();转到之前的超链接但是它可以多次返回，我只希望它能够返回一次 - 刚好足以关闭模态窗口。这就是我实现if语句的原因，该语句应检查是否打开了#izrazi-zanimanje-univerzalno。否则ESC键不应该做任何事情。

我也尝试使用$('#izrazi-zanimanje-univerzalno').hide();而不是window.history.back()（如果没有句子），但它完全忽略了我的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实现第一个建议的解决方案之后，我在keypress上获得了这个控制台输出：

Answer 1

既然你正在使用JQuery，你不能运行淡入淡出动画然后关闭窗口吗？像这样：

$( "#clickme" ).click(function() {
  $( "#book" ).fadeTo( "slow" , 0, function() {
    // Animation complete now close overlay
  });
});

我made a JS.Fiddle with my example但我没有花时间将其应用于叠加层。