Question

所以，我有一个纯粹的CSS模态窗口，我很满意;它很轻，很快。但是，我想添加一些我认为只能通过javascript实现的特定功能 - 也就是说，我希望转义键触发模态的消失并单击叠加层来执行相同的操作。

作为纯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>

Answer 1

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

参考其Modal属性，评估屏幕上是否有display。

Answer 2

不知何故，我确实设法找到了解决方案：

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，则触发后退事件。经过测试和完美无缺。

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

只有在模态可见时才让ESC触发后退事件？

2 个答案: