☰

Bootstrapモーダルが背景に表示される 質問する

tag-icon • tag-icon javascript css twitter-bootstrap modal-dialog
Bootstrapモーダルが背景に表示される 質問する

私は、Bootstrap の例からモーダルのコードをそのまま使用し、bootstrap.js のみを含めました (bootstrap-modal.js は含めませんでした)。ただし、私のモーダルはグレーのフェード (背景) の下に表示され、編集できません。

それは次のようになります:

背景の後ろに隠れているモーダル

見るこのバイオリンこの問題を再現する方法の1 つとして、コードの基本構造は次のようになります。

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

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>

body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

なぜそうなるのか、またはこれを修正するにはどうすればいいのか、何かアイデアはありますか?

ベストアンサー1

モーダル コンテナーが固定位置または相対位置を持つか、固定位置または相対位置を持つ要素内にある場合、この動作が発生します。

問題を解決するには、モーダル コンテナーとそのすべての親要素がデフォルトの方法で配置されていることを確認します。

これを行うには、いくつかの方法があります。

  1. 最も簡単な方法は、モーダル div を特別な配置の要素の外側に移動することです。適切な場所の 1 つは、body の閉じタグの直前です</body>。
  2. あるいは、position:問題が解決するまで、モーダルとその祖先から CSS プロパティを削除することもできます。ただし、これによりページの外観と機能が変わる可能性があります。

おすすめ記事