CODEWITHSUNDEEP
javascriptmodal-dialog
GWR
GWR

Reputation: 2008

Close File Dialog via ESC in a Modal Which Also Closes via ESC

I have a modal dialog div that is set up to close when the user presses ESC, as follows:

//close modal when pressing Esc
document.addEventListener('keyup', function (e) {
    if (e.keyCode === 27) {
        m.style.display = 'none';
        mbg.style.display = 'none';
    }
});

All good so far.

In some cases, the active modal has a file upload button. When the file explorer dialog is open, and ESC is pressed, it closes the file explorer AND the modal.

How can I prevent the modal from closing when I press ESC to close the file explorer?

Upvotes: 1

Views: 649

Answers (1)

QBM5
QBM5

Reputation: 2788

Basically when the file input dialog opens (click event) set a variable to indicate the dialog is open. You can then tie into the onchange event for the file input which indicates the dialog has been closed (covers both cancel and confirm button) and set the variable back. Then check the variable when the esc key is clicked to see if dialog is open.

var isDialogOpen = false;

var fileInput  = document.getElementById("fileInput");
fileInput.addEventListener("click", function(){isDialogOpen = true;});
fileInput.addEventListener("change", function(){isDialogOpen = false;});

document.addEventListener('keyup', function (e) {
    if (e.keyCode === 27 && !isDialogOpen) {
        m.style.display = 'none';
        mbg.style.display = 'none';

    }
});

Writen from memory but the general concept is there

Upvotes: 1

Related Questions