ホームページ > ウェブフロントエンド > CSSチュートリアル > 私のブートストラップ モーダルが背景オーバーレイの背後に表示されるのはなぜですか?

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

Linda Hamilton
リリース: 2024-12-19 18:56:10
オリジナル
920 人が閲覧しました

Why is my Bootstrap Modal Appearing Behind the Background Overlay?

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

問題:

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

問題の再現:

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

<body>
    <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>
</body>
ログイン後にコピー

Root原因:

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

解決策:

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

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

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート