在打开的Select2下拉列表上按下退出键不应关闭Bootstrap模式-Java 学习之路

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

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

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

我已经试图通过听取干扰并取消关闭模态

select2-close

事件，没有成功 .

2 回答

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

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');
});
```
回复于 2024-04-23T17:46:28+08:00

使用

$('#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'
        });
    });
});

回复于 2024-04-23T17:46:28+08:00

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

2 回答

相关问题