javascript - バックグラウンドで表示される Bootstrap モーダル

Question

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;
}

これがなぜなのか、またはこれを修正するために私にできることはありますか?

score 718 · Accepted Answer

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

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

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

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

score 185 · Accepted Answer

上記のすべてのオプションを試しましたが、それらを使用しても機能しませんでした。

うまくいったこと: .modal-backdrop の z-index を -1 に設定します。

.modal-backdrop {
  z-index: -1;
}

score 66 · Accepted Answer

モーダルウィンドウを開いた後に高い z-index 値を与えることで動作するようになりました。例えば：

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");

score 16 · Accepted Answer

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

    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--;
        }
     });

詳細については、このリンク -ブートストラップ 3 - 固定サイドバーを使用すると背景の下に消えるモーダルを参照してください。

score 10 · Accepted Answer

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

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

.modal-backdrop には、navbar の上に設定する 1050 の値が必要です。

score 10 · Accepted Answer

.modal-backdropこれにアプローチする別の方法は、bootstrap.cssから z-index を削除することです。これにより、背景が体の残りの部分と同じレベルになり (まだフェードします)、モーダルが一番上になります。

.modal-backdropこのように見えます

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}

score 9 · Accepted Answer

私は単に設定しました：

#myModal {
    z-index: 1500;
}

そしてそれは動作します....

元の質問の場合:

.my-module {
    z-index: 1500;
}

score 6 · Accepted Answer

こんにちは、私は同じ問題を抱えていましたが、ブートストラップ 3.1 を使用すると、古いバージョンのブートストラップ (2.3.2) とは異なり、モーダルの html 構造が変更されたことに気付きました!

modal-dialog と modal-content でモーダルヘッダーのボディとフッターをラップする必要があります

<div class="modal hide fade">

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

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

    </div>
  </div>

 </div>

score 6 · Accepted Answer

上記の提案された解決策はどれもうまくいきませんでしたが、この手法で問題が解決しました:

$('#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);
});

score 6 · Accepted Answer

私はこの問題を抱えていましたが、それを修正する最も簡単な方法は、モーダルダイアログの div に 1040 より大きい z-index を追加することでした:

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

ブートストラップは、私の場合は z-index 1040 を持つ div modal-backdrop フェードを作成すると信じているので、これの上に modal-dialog を配置すると、グレーアウトすることはなくなります。

score 4 · Accepted Answer

あなたのナビゲーションバーのnavbar-fixed-top必要性に加えて、また変更 z-index = 1041 を使用する場合bootstarp-combined.min.css.navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

score 3 · Accepted Answer

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

.modal-backdrop {
    display:none;
}

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

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

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

ブートストラップ 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)

score 3 · Accepted Answer

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

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }

score 3 · Accepted Answer

3

$('.modal').insertAfter($('body'));

于 2016-01-03T23:43:12.913 に答える

score 3 · Accepted Answer

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

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}

<div class="my-modal-wrapper"></div>

score 3 · Accepted Answer

HTML を調べたところ、閉じられていない<div>タグがあることがわかりました。閉じると<div>問題が解決しました。PS:<div>タグはモーダルの祖先でも子でもありませんでした。

score 2 · Accepted Answer

Davide Lorigliola のように、z-index を上げて修正しました。

.modal-backdrop { z-index: -999999; }

score 2 · Accepted Answer

2

絶対位置を相対に変更します。

.modal-backdrop {
    position: relative;
    /* ... */
}

于 2015-03-19T02:38:57.130 に答える

score 1 · Accepted Answer

ボディに追加するときは注意してください！

これは間違いなく背景の後ろからそのモーダルを取得します:

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

ただし、これにより、ボディを開くたびに別のモーダルがボディに追加されるため、更新パネル内の編集および更新を含むグリッドビューなどのコントロールをモーダルに追加するときに頭が痛くなる可能性があります。したがって、モーダルが閉じるときに削除することを検討してください。

例えば：

$(document).on('hidden.bs.modal', function () {
        $('.modal').remove();
    });

追加されたモーダルを削除します。(もちろんこれは一例であり、モーダルに追加した別のクラス名を使用することもできます)。

そして、すでに他の人が述べたように; モーダルから背景をオフにするだけです (data-backdrop="false")。または、画面を暗くしないと生きていけない場合は、.modal-backdrop css クラスを調整できます (z-index を増やす）。

score 1 · Accepted Answer

私は同じ問題を抱えていて、Muhdの答えもチェックしてください。

しかし、私のモーダルは左、上属性が必要なので、固定位置を絶対位置に変更するだけでうまくいきました。

.modal {
    position: absolute;
}

score 1 · Accepted Answer

この動作は、閉じられていないタグ、特に unclosed がある場合に発生することがあります</div>。モーダルの場所を確認し、すべてのタグが適切に閉じられていることを確認するか、</body>タグを囲む直前に div モーダルをページの下部に近づけることができます。

score 0 · Accepted Answer

回避策を作成できますが、これによりすべてのページからフェードが削除されます。モーダルは、Facebook のポップアップのようにポップアップします。モーダルを開いた後、次を試してください：

 $('.modal-backdrop').removeClass('modal-backdrop');

score 0 · Accepted Answer

私のように、プラグインやテーマを使用せずにBootstrapをWordpressに追加した場合:

ファイルにブートストラップCSSとJSを追加しました。function.php次に、ワードプレスページでモーダルを呼び出します。私が何をしても、の前に.modal-backdropい続けました#mymodal。これはz-index の問題であることがわかりましたが、内およびの最後に#mymodal生成されたように、z-index が機能しませんでした。私がしたことは、それが生成された後も最後に移動することでした:content div.modal-backdrop<body>#mymodal

$(document).ready(function () {
   $('#mymodal').on('shown.bs.modal', function () {
       $('#mymodal').appendTo(document.body);
     })
});

ちなみに、ボタンを押しても呼び出されていなかったので、shown.bs.modal内部に追加する必要がありました。$(document).ready

score 0 · Accepted Answer

クラス.modal-openオーバーフロー値をからhiddenに上書きしてみてvisibleください。

.modal-open {
    overflow: visible;
}

score 0 · Accepted Answer

Sharepoint 2013 Modal ブートストラップを使用して Iphone と Ipad でこのような問題が発生し、バックグラウンドで z-index の問題が発生しました。

私はこれを JS で使用します:

$('#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);
});

score -2 · Accepted Answer

display: noneset " " にインラインスタイルタグを追加すると、この問題が回避されることがわかりました。コードの位置は何の効果もありませんでした。

score -4 · Accepted Answer

これをスタイルシートに追加します。

.modal-backdrop {
    background-color: #000;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 0 !important;
}

javascript - バックグラウンドで表示される Bootstrap モーダル

58 に答える 58

Related

Reference