9 
<button class="btn" onClick="$('#firstModal').modal('show');">First</button>

<!-- Modal -->
<div id="firstModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        <button class="btn" onClick="$('#secondModal').modal('show');">Second</button>
    </div>
</div>

<!-- Modal -->
<div id="secondModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        Some error message goes here.
    </div>
</div>

すべて正常に動作します。唯一の問題は、最初のダイアログが 2 番目のダイアログのオーバーレイの上に表示されることです。どうすればこれを修正できますか?

これが今の様子です： ここに画像の説明を入力

そして、私はそれを次のようにしたい: ここに画像の説明を入力

4

9 に答える 9

7

このスタッキングの問題をプログラムで解決する方法についてブログ記事を書きました: http://gurde.com/stacked-bootstrap-modals/

$(document)  
  .on('show.bs.modal', '.modal', function(event) {
    $(this).appendTo($('body'));
  })
  .on('shown.bs.modal', '.modal.in', function(event) {
    setModalsAndBackdropsOrder();
  })
  .on('hidden.bs.modal', '.modal', function(event) {
    setModalsAndBackdropsOrder();
  });

function setModalsAndBackdropsOrder() {  
  var modalZIndex = 1040;
  $('.modal.in').each(function(index) {
    var $modal = $(this);
    modalZIndex++;
    $modal.css('zIndex', modalZIndex);
    $modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
});
  $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
}
于 2014-07-15T15:46:30.240 に答える
2

モーダルの背景 (オーバーレイ) は、BODY 内のすべてのモーダルで共有されていると思います。

ただし、2 番目のモーダルの 'show' イベントを使用して、最初のモーダルの不透明度を変更できます。つまり、最初のモーダルにオーバーレイの効果を与えます。

$('#myModal2').on('show', function() {
    $('#myModal').css('opacity', .5);
});

デモ: http://bootply.com/61322

編集：

モーダル 2 が開いているときにモーダル 1 を無効にしたい場合は、モーダル 2 が開いたときにモーダル 1 のバインドを解除し、モーダル 1 が閉じたときにモーダル 1 を復元できます。このためのBootplyを更新しました。

$('#myModal2').on('show', function() {
    $('#myModal').css('opacity', .5);
    $('#myModal').unbind();
});
$('#myModal2').on('hidden', function() {
    $('#myModal').css('opacity', 1);
    $('#myModal').removeData("modal").modal({});
});
于 2013-05-14T17:43:43.177 に答える
1

「secondModal」に属性を追加できます

style="z-index:100000;"
于 2013-05-14T15:55:09.457 に答える
1

この css ルールを使用して、2 番目の「影」の z-index を変更できることがわかりました。

.modal-backdrop.fade.in:nth-child(2){
    z-index: 1060 !important;
}

古いブラウザとの互換性についてはわかりませんが、2 番目のダイアログの z-index をたとえば 1070 に設定するだけで済みます。

于 2013-05-15T09:18:59.543 に答える
0

この方法で簡単に実行できます: (注: これにはブートストラップ 3 が必要です)

<button class="btn" data-target="#firstModal" data-toggle="modal">First</button>

<div id="firstModal" data-target="#secondModal" data-dismiss="modal" 
data-toggle="modal">
    <div class="modal-body">
        <button class="btn" onClick="$('#secondModal').modal('show');">Second</button>
    </div>
</div>

<div id="secondModal" >
    <div class="modal-body">
        Some error message goes here.
    </div>
</div>
于 2017-09-11T17:24:23.637 に答える