我有以下模态工作,
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.
