背景の下に表示されるブートストラップモーダル

576

私はブートストラップの例から直接モーダルのコードを使用し、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;
}

これがなぜであるか、またはこれを修正するために私が何ができるかという考えはありますか？

javascript  css  twitter-bootstrap  modal-dialog 
— natlines
ソース
他の誰かがオープンタグなどを探して、なぜこれが起こっているのかを理解しようとした場合、私にとっては、モーダルを壊したのはFeedlyのchrome拡張機能でした。拡張機能を無効にすると、動作が通常に戻りました。
— 14
場合によっては、問題はiOSにありoverflow-x: hidden、モーダルのコンテナーに適用されたことが原因でした。
— idmean 2015
1
3つのバージョンにわたって3つの例を作成しました。3.3.1は正常に動作し、他は動作しません。 バージョン3.3.1 jsfiddle バージョン3.3.5 jsfiddle バージョン3.3.6 jsfoddle
— Dimitry
1
Bootstrapチームでバグレポートを作成したが、3.3.1で問題なく動作したとしても、これは実際にはバグではないようです。詳細については、投稿したリンクを参照してください。
— Dimitry
この問題に直面誰にも関連のブログ記事weblog.west-wind.com/posts/2016/Sep/14/...を

回答:

629

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

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

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

  1. 最も簡単な方法は、モーダルdivを移動して、特別な配置で要素の外側に配置することです。良い例の1つは、本文の終了タグの直前</body>です。
  2. あるいは、position:問題がなくなるまで、モーダルとその祖先からCSSプロパティを削除できます。ただし、これによりページの外観や機能が変わる場合があります。
— ムハド
ソース
24
良いキャッチ。参考までに、「修正済み」だけでなく、親の「相対」の位置もこの問題の原因になります
— Giang Nguyen
3
@Muhdそれとそのすべての親要素がデフォルトの方法で配置されていることをどのように確認しますか？
— インダゴ2013年
4
オプション1を使用することをお勧めします：「モーダルdivを移動して、特別な位置にある要素の外側になるようにします」。Thx
— mpgn
9
この答えがわかりません。ブートストラップの例は、「モーダル」、「モーダルフェード」などのラインに沿っていくつかのクラスを持つモーダルdivを示しています。では、.modalがposition：fixedを設定したときに、モーダルコンテナーを移動すると何かが変更されますか？
— カルロス
4
私はまだこの問題を抱えています。私は右の前にそれを追加</body>し、body任意の持っているdoens't positionスタイルATTRIBを。他のアイデアは？
— Tuan Anh Tran
383

問題は、親コンテナーの配置に関係しています。表示する前に、これらのコンテナーからモーダルを簡単に「移動」できます。showjsを使用してモーダルを使用していた場合の方法は次のとおりです。

$('#myModal').appendTo("body").modal('show');

または、ボタンを使用してモーダルを起動する場合は、ドロップし.modal('show');て次のようにします。

$('#myModal').appendTo("body")

これにより、すべての通常の機能が維持され、ボタンを使用してモーダルを表示できます。

— アダム・オルブライト
ソース
12
その汎用イベントハンドラーを使用して、@ leandrotkソリューションをページ内のすべてのモーダルで機能させる$('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
— Patrick M.
2
@PatrickM。すごい！それは私が引き継いでいる古いプロジェクトの魅力のように機能し、彼らは至る所にモーダルを持っていました！
— denislexic
5
これは、CSSの配置を実際に修正できない場合に効果的です。ありがとう:)
— alexcasalboni
これを行うときにすべてのCSSフォーマットを失う理由はありますか？そして簡単な修正？:-)
— Eugene van der Merwe 2017
1
leandrotkの回答から、＃myModalを.modalに変更して、次のようにします：$（ '。modal'）。appendTo（ "body"）。デフォルトのクラスモーダルがあるため、これはすべてのモーダルで機能します。
— Ngatia Frankline 2017
170

上記で提供されているすべてのオプションを試してみましたが、それらを使用して動作させることができませんでした。

何が機能したか： .modal-backdropのz-indexを-1に設定。

.modal-backdrop {
  z-index: -1;
}
— ヤンファンデルブルク
ソース
10
これは完璧に機能し、はるかに簡単なソリューションです。私が使用しましたz-index: 0;
— andrewcockerham 2014年
このオプションのみが機能することも確認できます！ありがとう！
— フェリークラネンバーグ2015
ありがとう！これはBS3のバグですか？
— mauriblint 2015年
1
これは、さまざまなzインデックスを持つテーマを使用している場合は機能しません。たとえば、背景をに設定すると、パネルなどのページの他の要素の背後-1に表示されます。ただし、モーダルポップアップを除くすべての上に設定します。3
— Justin Skiles、2015
1
これは、上記で高く評価された回答の提案を使い果たした後でも、最速の方法であることがわかりました。私の場合、modal-dialogクラスでdivを1060のz-indexに設定すると、オーバーレイの前にポップされました。ナビゲーションバーを使用する場合は、モーダルをオーバーレイの上に移動し、逆には移動しないようにします。そうしないと、ナビゲーションバーがオーバーレイの上に表示される場合があります...混乱が発生します...
— Mike
152

また、BootStrap cssとjsのバージョンが同じであることを確認してください。異なるバージョンでは、モーダルが背景の下に表示される場合もあります。

例えば：

悪い：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

良い：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
— シド
ソース
私もこれで終わりです。ありがとう！
— PedroTanaka 2015年
同じ問題があっただけで、同じバージョンのスタイルシートソリューションがすべての人を助けているようです！ありがとう
— HGB
ありがとう、これは私の正確な問題
— でした
Malcorは問題ありません。このバグを見つけ出すまでに長い時間を費やしました。それが'14年だったことがわかるように、現在は'16年ですが、バグはまだ存在しています。実はこれはバグではありませんが、ブートストラップで著者は、彼らのドキュメントか何かにこれを追加する必要があります...
— シド
ここでも同じことですが、SASSの生成に切り替えて、jsファイル自体を完全に忘れてしまいました。これが一番上の答えである必要があります。デフォルトでは、モーダルは常にbody closeタグの直前に含まれています...
— Angry 84
116

私もこの問題に遭遇しましたが、実際には背景が必要ないことがわかるまで、解決策はどれも私にとってはうまくいきませんでした。次のコードで背景を簡単に削除できます。

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

注：data-backdrop属性はfalse（他のオプション：staticまたはtrue）に設定する必要があります。

— PieterVK
ソース
2
はるかに簡単なソリューションであり、魅力のように機能します！
— learning_to_swim
鮮やかさ！また、ブートストラップを要求する必要もありました。なぜ他のすべてのブートストラップ機能が正常に機能するのかわかりませんが、モーダルを機能させる必要がありました。
— スティーブクライン2015
パーフェクト!!! 一日苦労しました。そして、あなたは私の別の日を救いました。改めてお礼
— Bhaskara
1
すべてのソリューションを注意深く読んだ後、これが今日のバージョンのブートストラップとjQueryの時点で最も賢明なものであることがわかりました。ありがとうございました。
— 暗号化2015年
3
ありがとうございました！この質問には140k以上のビューがあり、ブートストラップでこれを修正できない理由がわかりません。ああ、乾杯。
— チャド
58

私は、モーダルウィンドウに高のz-index値を与えることによって仕事にそれを得たAFTERそれを開きます。例えば：

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
— アンドリュー・ダイスター
ソース
それは機能していますか（男はそうだと言います）、なぜあなたは反対票を投じますか？私が見ていると、そうなるようです。
— ロリス
ええ、なぜこれが悪い答えなのか誰でも説明できますか？それは一種のハックなだけなのでしょうか？
— ブランドン2013
6
私は反対票を理解していません。はい、それはハッキーですが、他のソリューションは私にとってはうまくいかなかったので、「ハッキー」ソリューションを使用して気の利いたものを機能させるだけのことを気にしない人々にこれを貢献したいと思いました。
— Andrew Dyster 2013
これは、フルスクリーン要素の上にモーダルを置くという私の特定の問題に関連する洞察でした。+1
— ジャックストーン
3
それはハックであり、これを示すための試みを行わないので、それは悪い答えです。他の答えは、「他に何もうまくいかない場合は...」と言います。実際には、モーダルはウェブ全体で非常に広く使用されており、正しく実装されていれば機能するはずです。ハッキーな答えは、人々が物事を正しい方法で行う方法を考え出すのに役立ちません。
— Lukos 2014年
35

@Muhdが提供するソリューションは、それを行うための最良の方法です。ただし、ページの構造を変更できない場合は、次のトリックを使用します。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

ここでの秘訣はdata-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" 、デフォルトの背景を削除し、ダイアログ自体の背景色にアルファを設定してダミーの背景を作成することです。

更新1： @Gustynが指摘したように、背景をクリックしてもダイアログは期待どおりに閉じません。そのためには、Javaスクリプトコードを追加する必要があります。これを実現する方法の例をいくつか示します。 

$('.modal').click(function(event){
    $(event.target).modal('hide');
});
— クリシュネンドゥ
ソース
これは、背景をクリックしてもダイアログが期待どおりに閉じないことを除いて機能します。
— Gustyn
Krishnendu uは私のヒーローです。運命と憂鬱を念頭に置いて仕事をするようになりました。私の最後のプレゼンテーションの3日前にこの問題に直面することは、控えめに言っても、突然の神経破壊でした。私の友人は、悲しいことに100000回の賛成票に値します。
— DotNetBeginner 2017年
モーダルがで宣言されていることだけdiv要素-私はこれをしようとすると、それはページの完全な背景をカバーしていない。
— ウィルサム
完璧に働きました。ありがとうございました！
— gfernandes 2017
完璧に働きました。ありがとうございました！
— Mayank Pandeyz、2018年
16

これは遅いですが、ここに一般的な解決策があります-

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

詳細については、固定リンクを使用すると、このリンク-Bootstrap 3-モーダルが背景の下に表示されなくなります。

— ロハン
ソース
これは、他の人のテーマの親要素を制御できない場所で作成したWordpressプラグインの完璧なソリューションでした。
— Mark Rummel、2014年
これまでのところ最高の解決策！
— digz6666
10

これに取り組むもう1つの方法は.modal-backdrop、bootstrap.css からz-indexを削除することです。これにより、背景が体の他の部分と同じレベルになり（まだ消えます）、モーダルが上になります。

.modal-backdrop こんな感じ

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}
— サミュエル・バージェロン
ソース
10

CSSを2行追加するだけです。

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

.modal-backdropは、ナビゲーションバーに設定するために1050の値を持つ必要があります。

— ワヒプリマディ
ソース
いいですが、モーダルのコンテナーにposition: fixedこれがある場合は機能しません。
— CPHPython 2018年
10

これは、アニメーションや予想される動作を台無しにすることなく、すべてのモーダルをカバーします。 

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});
— カムタロス
ソース
1
グローバルソリューション。ただし、問題を見つけることをお勧めします。
— Milad Abooali 2017
私は素晴らしい解決策ではないと思います、モーダルの多いページはどうですか？乱雑になる可能性があります。
— グレン
それがどのように乱雑になるのか説明できますか？モーダルをDOMの現在の場所からbodyタグの最後に移動するだけです。それはまだそこにないものを作成するのではなく、それを移動して自動的に上部のZインデックスを与えます。
— Cam Tullos 2017
最良のソリューションだと思います。CSSを編集してモーダルの外観を変更する必要はありません
— Moslem7026
8

私は単に設定しました：

#myModal {
    z-index: 1500;
}

そしてそれはうまくいきます...

元の質問： 

.my-module {
    z-index: 1500;
}
— AmintaCode
ソース
私の問題もZ-indexでした。
— James Lock、
8

この問題は、CSSのグラデーションなどを背景やアコーディオンヘッダーなどに使用するときによく発生します。

残念ながら、コアBootstrap CSSを変更またはオーバーライドすることは望ましくなく、望ましくない副作用が発生する可能性があります。最も煩わしくない方法は追加するdata-backdrop="false"ことですが、フェード効果が期待どおりに機能しなくなっていることに気付くでしょう。

Bootstrapの最近のリリースをフォローした後、バージョン3.3.5は不要な副作用なしにこの問題を解決するようです。

ダウンロード： https //github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

3.3.5以降のCSSファイルとJavaScriptファイルを必ず含めてください。

— リチャード・ナレジンスキー
ソース
6

こんにちは私は同じ問題を抱えていましたが、bootsrap 3.1を使用すると、古いバージョンのbootsrap（2.3.2）とは異なり、モーダルのHTML構造が変更されたことに気づきました。

モーダルヘッダーボディとフッターをモーダルダイアログとモーダルコンテンツでラップする必要があります 

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>
— タルシボニー
ソース
+1 bootstrap.cssおよびbootstrap.jsの互換性のあるバージョンを使用していること、およびマークアップが使用しているバージョンと一致していることを確認してください。
— srayner 2014
はい、これが私の結論でした。誰かがこの問題を抱えていたとしても、ここに書きました。
— talsibony 2014年
イエス・キリスト、この答えは深く埋められています。Bootstrap 4も同じケースです
— Randell
6

上記の推奨される解決策はどれも私にとってはうまくいきませんでしたが、この手法は問題を解決しました：

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
— Javed Iqbal
ソース
他の方法でCSSの書式設定を失ったので、私はこの方法を好みます。
— Eugene van der Merwe 2017
6

私にはこの問題があり、それを修正する最も簡単な方法は、modal-dialog divで1040より大きいaddind z-indexでした：

<div class="modal-dialog" style="z-index: 1100;">

私はブートストラップがdiv modal-backdropフェードを作成すると信じています。私の場合、z-index 1040があるため、これの上にmodal-dialogを置くと、もうグレー表示になりません。

— クリス・ロゼテ
ソース
6

軽くて良い解決策があります。

それはいくつかの追加のCSSスタイルによって簡単に解決できます。

  1. クラスを非表示にする.modal-backdrop（Bootstrap.jsから自動生成）

    .modal-backdrop
{
display:none;
visibility:hidden; 
position:relative
}

  2. の背景を.modal半透明の黒い背景画像に設定します。

    .modal
{
background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
// translucent image from google images 
z-index:1100; 
}

これは、モーダルが</body>タグの近くではなく要素内にある必要がある要件がある場合に最適に機能します。

— JMティー
ソース
あなたは私の日を救った...これは素晴らしい代替手段です！
— notme '10 / 07/17
@xunga、心配ありません。このソリューションを他の人と共有してください:)
— JM Tee
ここで編集を表示できます... stackoverflow.com/posts/42887253/revisions
— notme
JMに感謝します。あなたの解決策が私にとってうまくいった唯一のものでした。
— アーメドJ.
5

z-index .modalを最高値に設定します

たとえば、.sidebarwrapperのz-indexは1100であるため、.modalのz-indexを1101に設定します

.modal {
    z-index: 1101;
}
— モフダムカミル
ソース
5

私の場合はそれを解決し、これを私のスタイルシートに追加します：

.modal-backdrop{
  z-index:0;
}
スニペットを展開

googleデバッガーを使用すると、要素BACKDROPを調べて属性を変更できます。ググ運。

— ケビンオバール
ソース
3

あなたのnavbarのnavbar-fixed-top必要性でz-index = 1041 、またあなたがも使用する場合bootstarp-combined.min.cssは変更 .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

— モーシン
ソース
3

.modal-backdropからz-indexを削除することもできます。結果のcssは次のようになります。

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }
— マシュー・ガレゴス
ソース
3

モーダル背景を削除しました。

.modal-backdrop {
    display:none;
}

これは良い解決策ではありませんが、私にとってはうまくいきます。

— CodeBriefly
ソース
3

私が見つけたのはそれです：

ブートストラップ3.3.0では正しくありませんが、ブートストラップ3.3.5では正しいです。コードを見てみましょう。3.3.0：

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

  this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)
— トン
ソース
3

これをあなたのページに追加してください。それは私のために働きます。

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>
— 武井
ソース
3

以下のスタイルをDIVタグに追加することでこれを修正しました

style="background-color: rgba(0, 0, 0, 0.5);"

そしてカスタムCSSを追加する

.modal-backdrop {position: relative;}
— レイモンドル
ソース
3

私にとって最も簡単な解決策は、絶対位置と.modal-backdropより高いz-indexを持つラッパーにモーダルを置くことでした。モーダル背景（少なくとも私の場合）にはz-index 1050があるので：

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}
<div class="my-modal-wrapper"></div>
スニペットを展開

— sivi911
ソース
Z-indexがうまくいきました。どうもありがとう。
— Asif Iqbal
2

私の場合、次のラッパーがありました。

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

z-index：1のみを削除し、問題を修正した理由がわかりません。また、相対位置を削除することは確かに行いましたが、私はそれが必要でした。

— hsobhy
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.