javascript - 在模态中通过 ESC 关闭文件对话框,该对话框也通过 ESC 关闭

标签 javascript modal-dialog

我有一个模式对话框 div,设置为当用户按 ESC 时关闭,如下所示:

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

到目前为止一切都很好。

在某些情况下,事件模式有一个文件上传按钮。当文件资源管理器对话框打开并按下 ESC 时,它会关闭文件资源管理器和模式。

当我按 ESC 关闭文件资源管理器时,如何防止模式关闭?

最佳答案

基本上,当文件输入对话框打开(单击事件)时,设置一个变量来指示对话框已打开。然后,您可以绑定(bind)到文件输入的 onchange 事件,该事件指示对话框已关闭(包括取消和确认按钮)并将变量设置回来。然后在单击 esc 键时检查变量以查看对话框是否打开。

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';

    }
});

凭内存写的,但总体概念已经有了

关于javascript - 在模态中通过 ESC 关闭文件对话框,该对话框也通过 ESC 关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34798742/

相关文章:

javascript - 将 Flex/Flash 交叉编译为 Javascript

java - 从其他java类调用变量

ipad - 使用 UIModalPresentationFormSheet 的模态视图出现在屏幕外

javascript - 使用 NODE.JS 在 http 响应中返回对象

javascript - 如何将部分 View 放入 JavaScript 中的 div 中(使用 jQuery)

javascript - NodeJs Mocha 未连接到数据库

SwiftUI 关闭模态

javascript - CSS/JavaScript : Make element top-most z-index/top-most modal element

javascript - Jquery模态自动关闭

javascript - 使用 Jade 模板 (jade-lang.com) 客户端