1

所以，我有一个我很满意的纯 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>
4

2 回答 2

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属性评估 是否在屏幕上。

于 2013-02-14T16:43:48.180 回答
1

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

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，则触发返回事件。经过测试并完美运行。

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

于 2013-02-14T19:28:04.797 回答