BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] Bootstrapのモーダルが背景の下に表示される

2022-03-15 14:11:19

質問

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

こんな感じです。

参照 このフィドル については 一 の方法で再現することができます。そのコードの基本的な構成は以下のようなものです。 

<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. 最も簡単な方法は、モーダル div を移動して、特殊な配置を持つ要素の外に出すことです。 良い場所の 1 つは、closing body タグの直前です。 </body> .
  2. または position: 問題が解消されるまで、モーダルとその祖先の CSS プロパティを削除します。 ただし、ページの外観や機能が変更される場合があります。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します