bootstrap-modal - select2 z-indexを使用したブートストラップモーダル

Question

別のhtmlページからポップアップにコンテンツをロードして、それにselect2を適用しようとしています。

すべてが機能していますが、select2 の z-index が正しくありません。ブートストラップ ダイアログよりも大きな値に変更した場合のイベントです。

ここに私がやっていることのスニペットがあります

.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

modal-openクラスでカスタムCSSを追加する

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