私のブートストラップ モーダルが背景オーバーレイの背後に表示されるのはなぜですか?

背景に隠れたブートストラップ モーダル

問題:

公式のブートストラップ ドキュメントに従っているにもかかわらず、モーダルが背景オーバーレイの下に表示されるため、

問題の再現:

問題を再現するコードは次の例のようになります:

    <p>Lorem ipsum dolor sit amet.</p>

    <div class="my-module">
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>

Root原因:

モーダル コンテナ (「フェード」クラスを持つ) は、固定位置や相対位置など、デフォルト以外の位置がある場合は非表示になります。この問題は、モーダル コンテナまたはその親要素の位置が異なる場合に発生します。

解決策:

問題を解決するには、モーダル コンテナとその親要素がデフォルトの位置。これを実現するには 2 つのアプローチがあります:

1. モーダルを配置された要素の外側に移動:

   • 特殊なメソッドを使用してモーダル div を要素の外側に再配置します。配置 (例:

以上が私のブートストラップ モーダルが背景オーバーレイの背後に表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。