How to close modal by pressing esc

Question

I am new to Javascript and I'd like to close this modal by pressing esc key, besides clicking on span. How to write it?

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"; 
                            }

I'm considering to add after that span:

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

but don't honestly know what's wrong there

Thanks for any help.

You need 2 equal sign in `display = 'block'` or else you _assign_ a value instead of _compare_ them ... e.g. `if (event.keyCode == 27 && modal.style.display == 'block')` — Asons, Apr 05 '18 at 13:24
Nothing happened :( I mean now modal works, but can't close it by pressing esc... Edit: thanks for quick reply. — oldo4, Apr 05 '18 at 13:46

Damian Peralta · Accepted Answer · 2018-04-05T14:01:43.290

0

Try with onkeyup instead of onkeypress:

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

Why?

Using onkeypress you'll get different key codes for different browsers. Check these threads on SO: Which keycode for escape key with jQuery And: How to detect escape key press with pure JS or jQuery?

edited Apr 05 '18 at 14:01

answered Apr 05 '18 at 13:56

Damian Peralta

1,846
7
11

Thank you so much Damian :) Now it's working perfectly – oldo4 Apr 05 '18 at 13:59

How to close modal by pressing esc

1 Answers1