如何通过按 esc 关闭模式答案

【问题标题】：How to close modal by pressing esc如何通过按 esc 关闭模式
【发布时间】：2018-04-05 13:22:47
【问题描述】：

我是 Javascript 新手，除了单击 span 之外，我还想通过按 esc 键来关闭此模式。怎么写？

var modal = document.getElementById('myModal');
                        var img = document.getElementById('myImg');
                        var img2 = document.getElementById('myImg2');
                        var img3 = document.getElementById('myImg3');
                        var img4 = document.getElementById('myImg4');
                        var modalImg1 = document.getElementById("img01");
                        var captionText = document.getElementById("caption");

                            img.onclick = function()
                                {
                                    modal.style.display = "block";
                                    modalImg1.src = this.src;
                                    captionText.innerHTML = this.alt;
                                }
                            img2.onclick = function()
                                {
                                    modal.style.display = "block";
                                    modalImg1.src = this.src;
                                    captionText.innerHTML = this.alt;
                                }   
                            img3.onclick = function()
                                {
                                    modal.style.display = "block";
                                    modalImg1.src = this.src;
                                    captionText.innerHTML = this.alt;
                                }   
                            img4.onclick = function()
                                {
                                    modal.style.display = "block";
                                    modalImg1.src = this.src;
                                    captionText.innerHTML = this.alt;
                                }   

                            var span = document.getElementsByClassName("close")[0];

                            span.onclick = function() 
                            { 
                                modal.style.display = "none"; 
                            }

我正在考虑在该跨度之后添加：

window.onkeypress = function (event) 
                            {
                                if (event.keyCode == 27 && modal.style.display='block') 
                                    {
                                        modal.style.display='none';
                                    }
                            }

但老实说不知道那里出了什么问题

感谢您的帮助。

【问题讨论】：

您需要在display = 'block' 中使用两个等号，否则您分配一个值而不是比较它们...例如if (event.keyCode == 27 && modal.style.display == 'block')
什么都没有发生 :( 我的意思是现在 modal 可以工作了，但是不能通过按 esc 来关闭它...编辑：感谢您的快速回复。

标签： javascript html modal-dialog solution

【解决方案1】：

尝试使用onkeyup 而不是onkeypress：

window.onkeyup = function (event) {
    if (event.keyCode == '27' && modal.style.display=='block') {
        modal.style.display='none';
    }
}

为什么？

使用onkeypress，您将获得针对不同浏览器的不同密钥代码。在 SO 上检查这些线程： Which keycode for escape key with jQuery 和： How to detect escape key press with pure JS or jQuery?

【讨论】：

非常感谢 Damian :) 现在一切正常