所以,我有一个我很满意的纯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
,则触发返回事件。经过测试,工作完美。
如果有人确实提供了一个更干净、更短的代码,那么我会将他们的答案标记为已接受。