javascript - 模式关闭，在按钮单击时具有过渡效果

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

所以我的尝试是使用 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 提出的第一个建议解决方案后，我在按键时得到了这个控制台输出:

Answer 1

既然您使用的是 JQuery，那么您不能运行淡入淡出动画然后关闭窗口吗？像这样:

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

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