Question

使用Twitter Bootstrap 3，Select2下拉列表嵌入在模态中现在，在这样的打开的 Select2元素上按下转义键时，下拉和模式对话框将立即关闭。

在这种情况下如何防止模态被关闭？
但是，在当前聚焦下拉列表关闭的情况下，按下转义键时关闭模态是很好的。因此，在上述情况下，它需要两个退出键按下：第一个关闭下拉列表，第二个关闭模态。

我准备了一个jsfiddle来轻松重现行为http://jsfiddle.net/a82RX/ （我使用与bootstrap文档中相同的模态，使用非常简单的select2下拉列表。）

我已经尝试通过聆听

来干涉并取消关闭模态

  select2-close

事件，没有成功。

Answer 1

使用

  $('#myModal').modal({keyboard:false});

参考http://getbootstrap.com/javascript/#modals-usage

完整解决方案：

HTML

<button class="btn btn-primary btn-lg" id="modalLaunch">Launch demo modal</button>

脚本：

$(function() {
    $("#e1").select2();
    $("#modalLaunch").click(function() {
        $('#myModal').modal({
            show:true,
            keyboard:false,
            backdrop:'static'
        });
    });
});

Answer 2

我也遇到过这种情况，我找到了解决这个问题的方法。它是不同想法的结合。

1）显示模态时，将键盘设置为false。代码正是@ravimallya所提供的。

2）听取'esc'键盘事件。（我猜你也可以听keydown / keypress事件，但是我选择了keyup）

var ESCAPE_KEY = 27;
$('#myModal').on('keyup', function (event) {
    if (event.which === ESCAPE_KEY) {
        $('#myModal').modal('hide');
    }
});

3）[Bonus]我还实现了双重转义以关闭模态功能，这不是那么明显所以决定与大家分享。基本上当焦点在select2上并且下拉列表打开时，当您按下'Esc'时，select2下拉菜单将关闭。但是，如果再次按“Esc”，则没有任何反应。虽然第二个'Esc'的行为是正确的，但我更愿意关闭模态。所以这是我的代码实现：

$('#mySelect').select2();
var mySelectContainer = $(mySelect).data('select2').container;
$(mySelectContainer).on('keyup', function (event) {
    if (event.which === KeyCodes.Escape) {
        $('#myModal').modal('hide');
    }
});

监听select2-close事件不起作用的原因是因为模式的keyup（或类似的东西）处理程序在'esc'发生后立即触发。

不过，如果您碰巧发现自己订阅了许多keyup / keydown / keypress事件，您可能需要查看JQuery HotKeys。如果您已经在使用它，那么上面的解决方案如下所示：

$('#myModal').on('keyup', null, 'esc', function () {
    $('#myModal').modal('hide');
});

在打开的Select2下拉列表上按下退出键不应关闭Bootstrap模式

2 个答案: