select2 4 和 bs3 模态 - z-index 问题？答案

【问题标题】：select2 4 and bs3 modals - z-index issue?select2 4 和 bs3 模态 - z-index 问题？
【发布时间】：2015-06-11 16:04:59
【问题描述】：

在从select2 3.5 -> 4.0切换的过程中。我现在遇到了在 boostrap modals 中使用时出现问题的情况。

在 3.5 中，我使用了这样的东西，让它们能够正常运行：

.modal-open .select2-drop-mask {
  z-index: 10051;
}

.modal-open .select2-drop {
  z-index: 10052;
}

.modal-open .select2-search {
  z-index: 10053;
}

4.0 中的类和其他很多东西都发生了变化，这不再有任何作用。我假设问题与 z-index 相关，但不确定。我在模态之外测试了相同的select，它按预期工作，这就是为什么我假设它与 css 相关。输入显示，但下拉、搜索等不显示。有没有其他人遇到过这个并找到了解决方案？

编辑 jsfiddle：

这与我的用例略有不同 - 我使用 load() 将远程内容注入模态，然后将其显示出来，但同样的问题在这里发生。您无法专注于搜索输入以键入任何内容。奇怪的是，我注意到它在 Internet Explorer 11 中有效，但在最新的 Firefox、Chrome 或 Safari 中无效。

modal fiddle

【问题讨论】：

标签： jquery-select2-4

【解决方案1】：

我解决了这个问题。您只需删除模态 div 中的 'tabindex="-1" '：

&lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;

【讨论】：