ホームページ >ウェブフロントエンド >CSSチュートリアル >私のブートストラップ モーダルが背景オーバーレイの背後に表示されるのはなぜですか?
私のブートストラップ モーダルが背景オーバーレイの背後に表示されるのはなぜですか?
- Linda Hamiltonオリジナル
- 2024-12-19 18:56:10895ブラウズ
背景に隠れたブートストラップ モーダル
問題:
公式のブートストラップ ドキュメントに従っているにもかかわらず、モーダルが背景オーバーレイの下に表示されるため、
問題の再現:
問題を再現するコードは次の例のようになります:
<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 つのアプローチがあります:
-
モーダルを配置された要素の外側に移動:
- 特殊なメソッドを使用してモーダル div を要素の外側に再配置します。配置 (例:
以上が私のブートストラップ モーダルが背景オーバーレイの背後に表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。