古いバージョンのブートストラップ・モーダル・クラスを本体から取り除く第2のモダルを最初のモダルから外す

Question

まあ、最新のブートストラップ・バージョンにはこの問題はありません。しかし、私は既存のウェブサイトのライブラリのバージョンを変更することはできません。したがって、私は自分のプロジェクトで手動で問題を解決しようとしています。以前の3.xバージョンのブートストラップでは古い問題です。モーダルから別のモーダルを開き、.modal-openをbodyから削除します。私はまだ解決策を見つけていない。私が試してみました、第2のモーダルのIDを標的とすることにより、再びクラスを追加します

$(document) 
    .on('shown.bs.modal', '#secondModal', function() { $('body').addClass('modal-open') }) 
    .on('hidden.bs.modal', '#secondModal', function() { $('body').removeClass('modal-open') }); 

この作品が、これは完璧なソリューションではありません。最初のモーダルを閉じるときには、ボディから.modal-openを一度削除して、同時に2番目のモーダルを開くクラスを追加するためです。しかし、削除してクラスを追加する効果は、私が望ましくない（クラスをbody要素から削除して、ダブルスクロールの問題を引き起こす）ことが明らかです。私は最初のモーダルから2番目のモーダルに移動したいので、.modal-openは削除されません。 2つ目のモーダルを閉じた後にのみ削除されます。 bootstrap.jsに触れることなくそれを行うには？ボディおよび効果からクラスを追加し、削除せずに問題を解決するための

Fiddle Demo

Answer 1

もっとエレガントな方法が全く表示されません基本的には、スクロールバーの理由と原因であるoverflowの追加と削除されます第1のモーダルから第2のモーダルに切り替えるとき。

$(document).ready(function() { 
    $('#secondModal').on('show.bs.modal', function() { 
    $('body').css('overflow-y', 'hidden'); 
    }); 
    $('#secondModal').on('hidden.bs.modal', function() { 
    $('body').css('overflow-y', ''); 
    }); 
}); 

注：shownからshowモーダルがすべてと第2の事象では顕著ではありませんので、スクロールバー非表示の効果を示すとしているの最初のイベントの変更は、それ以外のhideを持つ2番目のスクロールのを見ることができますhiddenする必要がありますバーが現れ、消えます。

Working Fiddle Example