如何使用“Esc”键盘按钮关闭多模式表单？

Posted 2023-05-08

【中文标题】如何使用“Esc”键盘按钮关闭多模式表单？

【英文标题】：How to close multi modal forms right with the "Esc" keyboard button?

【发布时间】：2018-06-25 04:29:56

【问题描述】：

我找到了this question 关于如何避免第二个模态的覆盖。所以我应用了@A1rPun 修复：

$(document).on('show.bs.modal', '.modal', function () 
    var zIndex = 1040 + (10 * $('.modal:visible').length);
    $(this).css('z-index', zIndex);
    setTimeout(function() 
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
    , 0);
);

$(document).on('hidden.bs.modal', '.modal', function () 
    $('.modal:visible').length && $(document.body).addClass('modal-open');
);

现在，当我按下Esc 按钮时，后面的模态表单将关闭。但是，前面的表格是必须关闭的。

我试图通过添加一些像下面的代码这样的监听器来修复它。但如果我这样做，有时两种形式都会同时关闭。也许是因为已经有另一个听众了。

$(document).ready(function() 
    $(window).keydown(function(event)
        if (event.keyCode == 27)   // Esc code
            if ($('.modal-form').length > 0) 
                let z = 0;
                let modal_to_close = null;
                $('.modal-form').each(function () 
                    let current_z = parseInt($(this).css('z-index'), 10);
                    if (z < current_z) 
                        z = current_z;
                        modal_to_close = $(this);
                    
                )
                modal_to_close.find('.close').click();
            
        
    );
);

我怎样才能使这项工作顺利进行？我应该覆盖 Bootstrap keydown 侦听器吗？怎么做？

注意：我使用的是 Bootstrap v3.3.7

【参考方案1】：

例如，您需要在所有模式上使用tabindex="-1"。

<div class="modal fade" id="myModal" tabindex="-1">

Working Fiddle

【讨论】：

当我在前面的模态表单中按Esc 时，我需要单击后面的表单以再次用Esc 关闭它。但这对我来说已经足够了，好方法