使用 Twitter Bootstrap 3，Select2 下拉菜单嵌入到模式中。
现在，当在这样一个 打开的 Select2 元素上按下退出键时，下拉 和 模态对话框都会立即关闭。
在这种情况下如何防止模式关闭？
但是，如果当前聚焦的下拉列表关闭，则可以在按下退出键时关闭模式。因此，在上述情况下，需要两次转义键：第一次关闭下拉菜单，第二次关闭模式。
我准备了一个 jsfiddle 来轻松重现 http://jsfiddle.net/a82RX/ 的行为。
（我使用了与 bootstrap 文档中相同的模式，带有一个非常简单的 select2 下拉菜单。）
我已经尝试通过监听来干扰和取消模式的关闭
select2-close
事件，没有成功。
【问题讨论】：
标签： javascript twitter-bootstrap twitter-bootstrap-3 jquery-select2
使用
$('#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'
});
});
});
【讨论】：
$("#e1").on("select2-close", function () { $('#myModal').modal('hide'); }); 从选择元素中选择任何选项后隐藏模式。您可以将select2的events与bootstrap modal javascript结合起来获取。
我也遇到过这种情况，我找到了解决这个问题的方法。这是不同想法的结合。
1) 显示模态时，将键盘设置为 false。代码正是 @ravimallya 提供的。
2) 监听 'esc' keyup 事件。 （我猜你也可以听 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');
});
【讨论】：