web-dev-qa-db-ja.com

Bootstrap背景の後ろに座っているモーダル

@ Jamescoo とほぼ同じ問題がありますが、スライドナビパネルを作成するためにいくつかのDIVをすでに配置しているという事実に起因していると思います。

複製された正確なセットアップを次に示します。 http://jsfiddle.net/ZBQ8U/2/

ボーナス：必要に応じて、スライドパネルのコードを自由に入手してください：）

Z-indexは競合してはならず、その値は正しくスタックされていることを示しますが、視覚的にはそうではありません。

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

この問題を解決する方法がわかりません...何かアイデアはありますか？

csstwitter-bootstrapmodal-dialogz-index
52
WizzyBoom

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

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

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

デモ

ドキュメントでこのソリューションを示唆しています。

モーダルマークアップ配置
モーダルの外観や機能に影響する他のコンポーネントを避けるために、常にモーダルのHTMLコードをドキュメントの最上位に配置してください。

109
Schmalzy

.modalのz-indexは.modal-backdropのz-indexよりも高いですが、その.modalは、#content-wrapよりも低いz-indexを持つ親div .modal-backdropにあります（z-index：1002 vs z-index：1030）。

親は.modal-backdropより低いz-indexを持っているため、子に与えられたz-indexに関係なく、その中のすべてがモーダルの背後になります。

z-indexとbody div#fullContainer #content-wrapの両方に設定した#ctrlNavPanelを削除すると、すべて正常に動作するようです。

body div#fullContainer #content-wrap {
  background: #ffffff;
  bottom: 0;
  box-shadow: -5px 0px 8px #000000;
  position: absolute;
  top: 0;
  width: 100%;
}

#ctrlNavPanel {
  background: #333333;
  bottom: 0;
  box-sizing: content-box;
  height: 100%;
  overflow-y: auto;
  position: absolute;
  top: 0;
  width: 250px;
}

注：最初に＃content-wrapと#ctrlNavPanelでz-indexを使用してnavが背後にあることを確認したかもしれませんが、nav要素はHTMLのcontent-wrapの前にあるので必要ありません。明示的にスタック順を設定するのではなく、それらを配置する必要があります。

EDITSchmalzyが取り上げたように、リンクはクリックできなくなりました。これは、フルコンテナの幅が100％であり、ナビゲーションをカバーしているためです。これを修正する最も簡単な方法は、ナビゲーションをそのdiv内に配置することです。

<div id="fullContainer">
  <aside id="ctrlNavPanel">
    <ul class="nav-link-list">
      <li><label>Menu</label></li>
      <li><a href="/"><span class="fa fa-lg fa-home"></span> Home</a></li>
      <li><a><span class="fa fa-lg fa-group"></span>About Us</a></li>
      <li><a><span class="fa fa-lg fa-book"></span> Contacts</a></li>
    </ul>
  </aside>
  <div id="content-wrap">
    ...
  </div>
</div>

デモはこちら

26
davidpauljunior

私の場合、.modal-backdropにcssを追加することで修正できます

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

これは機能しますが、フォームコントロールは背景の上に表示されているように見え、どこでもクリックするとモーダルが消えますが、見栄えはよくありません。

私にとってより良い回避策は、表示されたイベントにバインドして（ページがロードされたら）、z-indexプロパティを修正することです。

$('.modal').on('shown.bs.modal', function() {
  $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

この場合、示されているモーダルのDOMを変更しても問題ない場合：

$('.modal').on('shown.bs.modal', function() {
  //Make sure the modal and backdrop are siblings (changes the DOM)
  $(this).before($('.modal-backdrop'));
  //Make sure the z-index is higher than the backdrop
  $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
21
jacoswarts

答えはどれも私にとって十分に機能しませんでした。この問題は、モーダルウィンドウを体外に配置する必要がある場所にあるように思われました。

そのため、次のコードはジョブを完全に完了させました。

$('.modal ').insertAfter($('body'));
$('#product_' + product_id + ' .modal ').insertAfter($('body'));
12
user109764

私の場合、私のモーダルの親の一人がアニメーション化され、これを持っていました

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    z-index: 100;
}

ここでのブロッカーはanimation-fill-mode: both;です。モーダルを外に移動することができなかったので、解決策は「アニメーション塗りつぶしモード」をanimation-fill-mode: none;にオーバーライドすることでした。アニメーションは引き続き正常に機能しました。

5
Eugene Shytik

私はいつか同じ問題と戦っていました... 3つの可能な解決策を見つけましたが、私が知らない、これは最適です、誰かが私に言ったら、私は感謝します。

変更はbootstrap.cssにあります

オプション1：

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040; <- DELETE THIS LINE
  background-color: #000000;
}

オプション2：

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1; <- MODIFY THIS VALUE BY -1
  background-color: #000000;
}

オプション3：

/*ADD THIS*/
.modal-backdrop.fade.in {
    z-index: -1;
}

オプション2を使用しました。

4
Lrodriguez84

本当に必要ない場合は、背景を削除してみてください（data-backdrop = "false"）：

<div class="modal fade" data-backdrop="false" role="dialog" id="my-modal" aria-labelledby="modal-title">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="modal-title">No Backdrop</h3>
                </div>
                <div class="modal-body">
                    <p>
                        Look! No backdrop here!
                    </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary">Ok</button>                    </div>
            </div>
        </div>
    </div>
3
Carlos Magno

これを使用できます：

<div
  class="modal fade stick-up disable-scroll"
  id="filtersModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="filtersModal"
  aria-hidden="false"
  style="background-color: rgba(0, 0, 0, 0.5);" data-backdrop="false"
>
....
</div>

Adding style="" and data-backdrop false would fix it.
1
Rishab Narang

ASP.NET MVCを使用している場合、

モーダルdivを</body>タグの直前に移動する必要があるが、レイアウトページを使用しているため移動できない

Bodyタグの直前に_Layout.cshtmlファイルでセクションを定義します。例：

... some html in layout page ...
@RenderSection("bottomHTML", required: false)
</body>
</html>

その後、あなたの意見で

@section bottomHTML 
{
<div class="modal fade" id="myModalID" role="dialog" tabindex="-1" aria-labelledby="demo-default-modal" aria-hidden="true">
... rest of the modal div HTML ...
}

これにより、モーダルHTMLがbodyタグの前にレンダリングされ、モーダルが正しく表示されるようになります。

1
Kemal Emin

この問題の別の解決策は、bootstrap.cssを変更したくない場合、bootstrap-dialog.cssファイルの.modal-backdropクラスにz-index: 0;を追加することです。

1
Mihaela Rada

背景を削除できない場合や、angularやvueなどのコンポーネントフレームワークがある場合は、モーダルをルートに移動できません。私はこのトリックをしました：モーダルダイアログコンテナの兄弟としてカスタムモーダル背景コンテナ（追加クラス付き）を配置し、いくつかのCSSを追加しました

<div bsModal #moneyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog">
    <!-- magic container-->
    <div class="modal-holder modal-backdrop" (click)="moneyModal.hide()"></div>
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                ....
            </div>
        </div>
    </div>
</div>

とCSS

.modal-backdrop{z-index: -1}// or you can disable modal-backdrop
.modal-holder.modal-backdrop{z-index: 100}
.modal-holder + .modal-dialog {z-index: 1000}
1
dimson d

モーダルコンテンツを元のコンテキスト外に移動するのは慎重です。他のJSやスタイルはそのコンテキストに依存する場合があります。

ただし、背景に特定のコンテキストを必要とするスクリプトやスタイルがあるとは思いません。

したがって、私の解決策は、モーダルコンテンツに隣接して背景を移動し、同じスタックコンテキストに強制することです。

$(document).on('shown.bs.modal', '.modal', function () {
    $('.modal-backdrop').before($(this));
});

jacoswarts ' solution からわずかにずれているだけなので、インスピレーションをありがとう！

1
Michael Crenshaw

ルートにモーダルを配置できない場合（たとえば、angularを使用し、モーダルがコントローラー内にある場合）、modifying bootstrapまたはjsは明らかにbadソリューションです。

あなたのウェブサイト構造があると言って：

//not working
<div>
    <div>
        <div>
            <modal></modal>
        </div>
    </div>
</div>

コードインスペクタを開き、モーダルをルートに移動すると、動作しているはずです（ただし、必要な場所はありません）：

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
</div>
<modal></modal>

これを最初のdivに入れて、それが機能しているかどうかを確認します。yesの場合は、次の子が機能しなくなるまでチェックし、問題のあるdivを見つけます。

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
    <modal></modal>
</div>

どのdivが問題であるかがわかったら、cssディスプレイと位置を操作して、それを機能させることができます。

誰もが異なる構造を持っていますが、私の場合は親をdisplay: table;に設定することが解決策でした

0
Sebastien Horin

多くの場合、モーダルを外部に移動することはできません。これは設計構造に影響するためです。

背景がモーダルの上に来る理由は、親が任意の位置を設定しているidです。

他の問題を解決する非常に簡単な方法は、モーダルを外側に移動することです。あなたの場合、それは

$(".modal-backdrop").appendTo("main");

このソリューションは、アプリケーションに明確な構造があり、設計構造に反してモーダルを外側に移動できない場合に適用できることに注意してください。

0
prajnavantha

このコードを好きな場所に置いてください

$('.modal').on('shown.bs.modal', function () {
    var max_index = null;
    $('.modal.fade.in').not($(this)).each(function (index , value){
        if(max_index< parseInt( $(this).css("z-index")))
            max_index = parseInt( $(this).css("z-index"));
    });
    if (max_index != null) $(this).css("z-index", max_index + 1);
});
0
Emre Abdullah Yavuz

フェードが機能せず、オーバーレイがページにとどまるという同様の問題がありました。動的コンテンツをページに追加し直しました（モーダルアクションでのみ一部のコンテンツを更新します）。また、この$（ '＃rejectModal-' + itemId）.modal（ 'hide'）（itemIdは、一部の情報を拒否するための単一ページ内の複数のモーダルの動的ID）もありましたが、問題はまだ解決していません。

パーシャルビューでレイアウトがnullに設定されていなかったため、オーバーレイは残りました。これを設定すると、問題はなくなりました。

@{ 
    Layout = null;
}
0
Dongolo Jeno

これは私のために動作します。

<div class="modal fade" id="modalDecision" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body text-center">
            <asp:Label runat="server" Height="30px">Please select recovery delivery option</asp:Label>
            <asp:LinkButton ID="btnEmail" CssClass="submit btn btn-primary" Width="100px" runat="server"
                OnClick="ModalRecovery">Email</asp:LinkButton>
            <asp:LinkButton ID="btnText" CssClass="submit btn btn-primary" Width="100px" runat="server"
                OnClick="ModalRecovery">Text</asp:LinkButton>
        </div>
    </div>
</div>

var element = $('#modalDecision');
    // also taken from bootstrap 3 docs
    $(element).on('shown.bs.modal', function (e) {
        // keep in mind this only works as long as Bootstrap only supports 1 modal at a time, which is the case in Bootstrap 3 so far...
        var backDrop = $("<div class='modal-backdrop' style='z-index:-1;opacity:.5'></div>");
        $(element).append($(backDrop));
    });
0
Jeff Brose

まず、モーダルが親divにないことを確認してください。次に、$（ '＃myModal'）。appendTo（ "body"）を追加します

私にとってはうまくいきました。

0
Varunsai Kodumuri

フォローHTMLがありませんでした

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

それを追加し、問題なく働いた

0
ncubica

JQueryを使用する場合、appendTo（）を使用して特定の要素にモーダルを追加できます。この場合、ほとんどの場合、モーダルdivの位置に関係なく、簡単な1行で背景の上にモーダルを移動できます。

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

jQuery appendTo関数のリファレンスは次のとおりです。 http://api.jquery.com/appendto/

フィドルに更新しました http://jsfiddle.net/ZBQ8U/240/

0
Joe Lu

ionicの後にbootstrapフレームワーク（ionic.min.cs）を適用すると、この問題が解決することがわかりました。

0
Chamika Goonetilaka

モーダルマークアップを移動する機会がないので、条件付きで部分的なテンプレートに追加したので、私にとってうまくいったのはCSSを追加することです

.modal.fade {
    display: none;
}

次に、boostrapがjs apply display：blockを介してクラス「in」を追加すると、すべてが正常に機能します。

0
Maxi

モーダルをすべてのdivコンテンツの外に移動するだけで、ほとんどの場合は本文を閉じる前に配置します。

0
Bhushan Pawar

私はこの問題に遭遇し、私のcssを調査した後、メインコンテナー（体の直接の子）には次のものがありました。

position: relative
z-index: 1

これらの2つのプロパティを削除した後、背景はうまく機能しました。メインラッパーにposition: fixedがある場合にも、この問題が発生する可能性があります。

0
Hassan ALAMI

z-index: 1040を削除するだけです。

このファイルからbootstrap.cssクラス.modal-backdrop

0
user301153

ここのすべての答えに加えて、bootstrap4「アニメーション化されたfadeIn」もこのエラーを引き起こしていることがわかりました（バックグラウンドの背後にあるクリック可能なモーダルではありません）：

モーダルが次の親タグにあるかどうかを確認します（ブートストラップアニメーション）

<div class="animated fadeIn"></div>

このタグを削除しました-私のために問題を解決しました。

0
Christian Bieser