ブートストラップモーダルウィンドウの下に不完全な選択表示を選択

ケース:2つのモーダルウィンドウがあり、クリック、ページのイジェクト(モーダルウィンドウ1)ページ、追加、選択された顧客情報を追加するユーザページ(モーダルウィンドウ2)を記入します。顧客情報の選択が完了した後、モーダルウィンドウ2を閉じます。1モーダル動作で窓:次いで、時間の選択及び制御、及びプルダウンを選択し(図1)を表示することができません。しかし、モーダルウィンドウ2を選択し、表示された情報を選択しますが、モーダルウィンドウの上2

図I

これは、問題のブートストラップ・フレームワークです。追加SELECT2はラベルスタイルを選択します。私はスタイルを取り除くことを試みました。それは可能性が、醜いです!

その後、長い間、私は記事見つけhttps://www.cnblogs.com/skybreak/p/6137035.html、主に以下のコードを

<style>
    /*select2在Bootstrap的modal中默认被遮盖,现在强制显示在最前*/
    .select2-drop {
        z-index: 10050 !important;
    }
    .select2-search-choice-close {
        margin-top: 0 !important;
        right: 2px !important;
        min-height: 10px;
    }
    .select2-search-choice-close:before {
         color: black !important;
    }

    /*防止select2不会自动失去焦点*/
    .select2-container {
        z-index: 16000 !important;
    }
   .select2-drop-mask {
        z-index: 15990 !important;
    }
   .select2-drop-active {
        z-index: 15995 !important;
    }
</style>

私は上記のページにこのコードを置きます。結果はページ全体のスタイルタグが変更された選択し、その結果も、選択したコンテンツ図II以下のdiv div要素がポップアップ表示されていることです

図II

このとき、2つのアイデアがあります:1は、それはただのスタイルにのみ、このdiv要素に適用されますが、私はできませんでした!

                                図2は、このdiv要素に、zインデックスダウンの内容を選択しません。問題があり、もはやプロセスを選択することはできません、あなただけの問題はないはずしようとする、時には直接上位ではない、そしてさらに上の、上部のdiv要素に対応する機能を選択する必要が

だから、すべての処理が完了します。要件を満たすために。

それはマスターのフロントエンドである場合、この問題は、で取得するのは非常に簡単なはずです。

公開された29元の記事 ウォンの賞賛3 ビュー20000 +

おすすめ

転載: blog.csdn.net/yangleiGJ/article/details/86085326