私はBootstrapの例から直接モーダルのコードを使用し、bootstrap.jsのみ(bootstrap-modal.jsは含まない)を含めました。しかし、私のモーダルは、グレーのフェード(背景)の下に表示され、編集できません。
以下はその様子です。
![modal hiding behind backdrop][1].
この問題を再現するための*1つの方法として、[this fiddle][2]を参照してください。そのコードの基本構造は次のようなものです。
<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.最も簡単な方法は、modal divを移動して、特別な位置にある要素の外側に置くことです。 良い場所としては、bodyタグ </body>
を閉じる直前が挙げられます。
2. 2. あるいは、問題が解決するまで、モーダルとその先祖から position:
CSS プロパティを削除することもできます。 ただし、これによりページの見た目や機能が変わる可能性があります。
この問題は、親コンテナの位置に関係しています。モーダルを表示する前に、これらのコンテナから簡単に"move"することができます。ここでは、jsを使ってモーダルを表示
する場合の方法を紹介します。
$('#myModal').appendTo("body").modal('show');
また、ボタンを使ってモーダルを起動している場合は、.modal('show');
を捨てて、そのまま実行します。
$('#myModal').appendTo("body")
これにより、通常の機能はそのままに、ボタンを使ってモーダルを表示することができます。