带有 select2 z-index 的引导模式答案

【问题标题】：bootstrap modal with select2 z-index带有 select2 z-index 的引导模式
【发布时间】：2015-10-15 16:51:37
【问题描述】：

我正在尝试将不同 html 页面中的内容加载到弹出窗口，然后在其上应用 select2。

一切正常，但 select2 的 z-index 不正确，如果我将其修改为比引导对话框更大的值。

这是我正在做的事情的sn-p

.select2-dropdown {  
  z-index: 10060 !important;/*1051;*/
}

有什么想法吗？

【问题讨论】：

您已使用 Select2 4.0.0 对此进行了标记，但您的屏幕截图肯定来自旧版本。您使用的是哪个版本的 Select2？
不，我已经引用了 4.0 版...，这适用于 3.5.x，但我已更新到 4.0 版并取消引用旧版本
您是否检查过此文档：select2.org/troubleshooting/common-problems。似乎 select2 v4 在引导模式方面存在已知问题
@CassioSeffrin，谢谢一百万！

标签： bootstrap-modal jquery-select2-4

【解决方案1】：

我遇到了同样的问题，但我确实使用了这个解决方案

style="z-index: 50 !important;"直接在模态上

&lt;div id="mdl_name_id" class="modal " tabindex="-1"  style="z-index: 50 !important;" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true"&gt;

【讨论】：

【解决方案2】：

结合在 Select2 GitHub 问题跟踪器上找到的几个解决方案似乎可以让 Select2 v4 与 Bootstrap 模态一起工作。

添加这个 css...

.select2-container--open {
    z-index: 9999999
}

然后我仍然无法在搜索框中输入...从模态 div 中删除“tabindex”属性修复了该问题。

【讨论】：

【解决方案3】：

我希望它的工作

尝试从模式中删除tabindex="-1"。

【讨论】：

它对我有用，我遇到了麻烦，我知道选项卡不会关闭模式，但总比不能在 select2 sarch 框中写任何东西要好。

【解决方案4】：

看起来很乱，对我来说这两个都需要：

.modal{
    z-index: 100000 !important;
}

.select2-container--open {
    z-index: 9999999 !important;
}

【讨论】：

【解决方案5】：

事实上，您不应该乱用 Select2 z-index。

您应该定义渲染 select2 的模式，就像：

$(document).ready(function() { 
    $("#s2id_autogen5").select2({ 
        dropdownParent: $("#myModal") 
    }); 
});

假设您的模态 ID 是“myModal”（在您的图像上不可读）。

这将避免 z-index 影响，同时也避免与 z-index 混淆的其他附带影响（例如使 select2 的搜索字段无法访问）。

【讨论】：

我这样做了，它提出了，但列表在模式后面。
你好@GuilhermeFlores。您是否有任何其他影响 select2 的 Z-Order 或其任何内部元素的 CSS？如果是这样，只需将其全部禁用，并确保在引导程序的模态容器中指向“dropdownParent”值。

【解决方案6】：

使用modal-open 类添加自定义css

.modal-open .select2-container {
  z-index: 9999;
}

【讨论】：

【解决方案7】：

对于 bootstrap v5 和 select2 v4 我做了这个

  .select2-container--open {
            z-index: 9999999;
        }

和焦点：假

let modal = bootstrap.Modal.getOrCreateInstance(myModalEl, { focus: false});

【讨论】：