BinaryDevelop
  1. ホーム
  2. css

Bootstrapのモーダルは背景の後ろにある

2023-10-11 15:49:23

質問

とほぼ同じ問題を抱えています。 Jamescoo とほぼ同じ問題を抱えていますが、私の問題は、スライド式のナビパネルを作成するために、すでにいくつかの DIV を配置したことに起因していると思います。

以下は、私の正確なセットアップを再現したものです。 http://jsfiddle.net/ZBQ8U/2/

ボーナス: よろしければ、スライドパネルのコードをご自由にお使いください :)

z-index は競合しないはずで、その値はそれらが正しく積み重なっていることを示すはずですが、視覚的にはそうではありません。

モーダルを開く」ボタンをクリックすると <div class="modal-backdrop fade in"></div> がすべてをカバーします! (リセットするには、コードを再実行する必要があります)

これを改善する方法がよくわからないのですが...何かアイデアはありますか？

どのように解決するのですか？

モーダル全体を他のコードの外側、一番下に移動するだけです。body 以外の要素にネストさせる必要はありません。 

<body>
    <!-- All other HTML -->
    <div>
        ...
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal">
        ...
    </div>
</body>

デモ

彼らはドキュメントでこの解決策をほのめかしています。

モーダルマークアップの配置

モーダルの HTML コードは、他のコンポーネントが外観や機能に影響を与えないように、常にドキュメントの最上位に配置するようにしてください。 他のコンポーネントがモーダルの外観や機能に影響を与えないようにするためです。

関連

最新

おすすめ

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