bootstrap-modal - 带有 select2 z-index 的引导模式

Question

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

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

这是我正在做的一个片段

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

有任何想法吗？

score 25 · Accepted Answer

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

添加这个CSS...

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

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

score 12 · Accepted Answer

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

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

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

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

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

score 3 · Accepted Answer

3

我希望它的工作

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

于 2019-04-09T11:04:53.797 回答

score 1 · Accepted Answer

1

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

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

于 2020-10-15T06:58:02.063 回答

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

和焦点：假

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

7 回答 7