只有当模态可见时，才让ESC触发返回事件

Have ESC trigger a back event only when modal is visible?

本文关键字：ESC 才让 事件 返回 模态      更新时间：2023-09-26

所以，我有一个我很满意的纯CSS模式窗口；它既轻又快。然而，我想添加一些特定的功能，我认为这些功能只能用javascript来实现——也就是说，我希望escape键触发模态的消失，并单击覆盖来执行同样的操作。

作为一个纯css模态，它依赖于：target伪属性，因此也依赖于url。所以，我决定试试这个：

document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
history.go(-1);
}
};

然而，通过将其加载到我的文档头中，无论模态是否在屏幕上，ESC都会触发一个返回事件。我只希望ESC在模式可见时按下时触发返回事件我该如何做到这一点

顺便说一下，模态的css将容器display属性从none更改为block。

.modalWrap {
    display:none;
    z-index:40001;
}
    #dbw.modalWrap:target {
        display: block;
    }

HTML：

<div class="modalWrap" id="dbw">
    content
</div>

document.onkeydown = function (evt) {
    if (document.getElementById(modal_id).style.display != 'none') {
        evt = evt || window.event;
        if (evt.keyCode == 27) {
            history.go(-1);
        }
    }
};

参照display属性评估Modal是否在屏幕上。

不知怎么的，我找到了一个解决方案：

window.document.onkeydown = function (e)
    {
        if (!e) e = event;
        if (e.keyCode == 27)
          var elem = document.getElementById("dbw");
            if (elem.currentStyle) {
                var displayStyle = elem.currentStyle.display;
            } else if (window.getComputedStyle) {
                var displayStyle = window.getComputedStyle(elem, null).getPropertyValue("display");
            }
        if (displayStyle != 'none') {
            history.go(-1);
        }
    }

按ESC键时，检索id为"dbw"的div的显示样式，然后，如果不等于none，则触发返回事件。经过测试，工作完美。

如果有人确实提供了一个更干净、更短的代码，那么我会将他们的答案标记为已接受。

相关文章：