带有select2 z-index的bootstrap模态

Question

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

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

这是我正在做的事情的片段

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

任何想法？

Answer 1

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

添加此CSS ...

<div class="dropdown">
   <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
   Dropdown button
   </button>
   <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
   </div>
</div>

然后，我仍然无法在搜索框中键入内容...从已修复此模式的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

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

style =＆＃34; z-index：50！important;＆＃34;直接在模态上

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

我希望它的工作

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

Answer 5

看起来很乱，对我来说这两个要求都必须

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

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

Answer 6

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

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