具有select2 z-index的引导模态

Question

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

一切正常，但是select2的z索引不正确，如果我将其修改为大于引导对话框的值，则发生这种情况。

这是我在做什么的摘要

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

有任何想法吗 ？

Answer 1

结合在Select2 GitHub问题跟踪器上找到的几个解决方案，似乎可以使Select2 v4与Bootstrap模式一起使用。

添加此CSS ...

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

然后，我仍然无法在搜索框中键入...从模式div中删除了已解决的“ tabindex”属性。

Answer 2

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

您应该定义呈现 select2 的模式，就像：

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

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

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

Answer 3

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

样式=“z-index：50！重要；” 直接在模态上

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