モーダル内のブートストラップモーダル。モーダルを閉じた後にスクロールできない

私は別のブートストラップモーダルを呼び出すブートストラップモーダルを持っています。今問題は、私が2番目のブートストラップモーダルを開き、それを閉じると、最初のブートストラップモーダルはそれ以上スクロールしないということです。代わりに、スクロールはバックグラウンドメインページによって取得されます。私はここで何をする必要があるので、2番目のモーダルを閉じると、最初のモーダルがフォーカスされ、2番目のモーダルの前と同じようにスクロールが取得されます。ここでモーダル内のブートストラップモーダル。モーダルを閉じた後にスクロールできない

$('#modalTrigger').on('click', function() { 
    setTimeout(function() { 
     $('#modalBody').html($('#contentText').html()); 
    }, 1000); 
}); 

$('#btnPrimaryModalAction').on('click', function() { 
    $('#secondaryModal').modal('show'); 
});

は、上記のような状況を定義する2つのブートストラップモーダルが含まれているJSFIDDLEへのリンクです。

出典

2017-08-20 Ankit Agarwal

あなたは二峰性を示し、前の最初のモーダルを隠そうとしたのですか？ – bhill77

私は両方のモーダルを表示します。 –

あなたの問題は、モーダルが開かれたときにブートストラップがボディ要素を「ロック」していることに対処する必要があります。モーダルが開かれたときのbody要素では、クラスmodal-openが追加されます。 2番目のモーダルを開くと何も起こりませんが、閉じると、必要なクラスが削除されますmodel-open。最後のモーダルが閉じられるまで、そのクラスを維持するためにjsにいくつかのロジックを追加する必要があります。モーダルの内側にモーダルを追加することは実際にはありません。

私はHERE

出典

2017-08-20 17:29:47 lscmaro

または、フレームワークを編集して、モーダル内のモーダルを処理し、ボディ上の 'modal-open'クラスと可視モーダルをチェックし、それに応じて処理することができます。 – lscmaro

ブートストラップモーダル示すあなたの<body>要素に新しいmodal-openクラスを追加することを回避するためにブートストラップを通してあなたに利用可能なモーダルイベントメソッドを使用してみてくださいお勧めします。閉じたときにはmodal-openクラスが削除されます。

子モダールを閉じるときに、そのクラスを<body>要素に再適用するだけで済みます。ここには次のことがあります：

親モーダル内のモーダルに新しいカスタムcssクラスを追加します。私の場合は

は、私が.child-modalを使用し、

/* when using a modal within a modal, add this class on the child modal */ 
$(document).find('.child-modal').on('hidden.bs.modal', function() { 
    console.log('hiding child modal'); 
    $('body').addClass('modal-open'); 
});

HTML

<div class="modal fade" tabindex="-1" role="dialog"> 
    ... 
    <a href="#" data-toggle="modal" data-target="#other_modal" title="Help"> 
     Open the other modal 
    </a> 
    ... 
</div> 
<div class="modal fade child-modal" id="other_modal" tabindex="-1" role="dialog"> 
    ... other codes here ... 
</div>

出典

2017-11-21 09:13:40 dexterb

モーダル内のブートストラップモーダル。モーダルを閉じた後にスクロールできない

答えて

関連する問題