CSS / HTML模态 – 使用Escape键/单击外部关闭

我有以下模态工作,

http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/

在我的网站上.在易用性和功能方面,这正是我想要的.我唯一的问题是如何在用户A)点击模态窗口之外时关闭模态,或者B)点击Escape键.

有什么建议？

最佳答案

为此你需要一点点javascript.检查代码并附上一些注释.

function modalClose() {
    if (location.hash == '#openModal') {
        location.hash = '';
    }
}

// Handle ESC key (key code 27)
document.addEventListener('keyup',function(e) {
    if (e.keyCode == 27) {
        modalClose();
    }
});

var modal = document.querySelector('#openModal');

// Handle click on the modal container
modal.addEventListener('click',modalClose,false);

// Prevent event bubbling if click occurred within modal content body
modal.children[0].addEventListener('click',function(e) {
    e.stopPropagation();
},false);

演示：http://jsfiddle.net/GG9Sa/264/

请注意,关闭模式在技术上仅适用于CSS / HTML,但是对于处理Escape键按下,您将需要Javascript.

原文地址：https://www.jb51.cc/css/427638.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。