は、最初のを閉じた後、モーダル（ブートストラップ3）

Question

をロード私は2つの閉じるボタンを持つページ（.lockdown）のモーダルを持っています。これらの一つは、（.btn-typoedit）は、単にしかし、他の（.btn-newcontact）はモーダルを閉じ、モーダルを閉じた後、すぐに別の（#change-contact）が開きます。しかし、この2番目のモーダルが閉じると、ページ全体がわずかに「シフト」し、2番目のスクロールバーのスペースが表示されます。

これは私が使用していますJavascriptコードです：（その後、「NEW」をクリックし、最初のモーダルを開く）

$(document).ready(function() { 
    $('.btn-newcontact').on('click', function() { 
     $('#change-contact').modal('show'); 
    }); 
}); 

そしてJSFddleのアクションでグリッチを参照してください：を通じて探しhttps://jsfiddle.net/z904fzcm/

ブートストラップのドキュメントでは、.hidden.bs.modalで実行するイベントを設定することができますが、何が問題になっているのかはまだ分かりません。

Answer 1

、私は次のように推測する管理：

• モーダルが開き、bodyはクラス.modal-openを受け取り、CSS padding-right: 17pxを受けます。
• モーダルが閉じたときに、上記のクラスおよびCSSが削除されます。
• あるモーダルを閉じて別のモーダルを開くコードが同じ.on('click')宣言内にあるため、.modal-openクラスとCSSは削除されましたが、2番目のモーダルに対しては再追加されませんでした。私は、関連するボタンがクリックされたときに、私は、ページの読み込みに0に設定され、changeContactを命名した後、私は1に変更する変数を監視これに対抗するために

。ブートストラップの有用なhidden.bs.modalイベントをチェックするときにその変数が1である場合は、との2つ目のモーダルを開きます。これにより、コードが2つの別々の関数に分けられます。これは、CSSが正しく変更されたことを意味します。

$(document).ready(function() 
{ 
    var changeContact = 0; 

    $('.btn-lockdown').on('click', function() { 
     changeContact = 0; 
    }); 

    $('.btn-newcontact').on('click', function() { 
     $('.lockdown').modal('hide'); 
     changeContact = 1; 
    }); 

    $('.lockdown').on('hidden.bs.modal', function() { 
     if (changeContact) { 
      $('#change-contact').modal('show'); 
     } 
    }); 
}); 

See it in action on JSFiddle

Answer 2

デモ身体に隠さ

$(document).ready(function() { 
    $('.btn-newcontact').on('click', function() { 

    $('#change-contact').modal('show'); 
     $('body').css({'overflow':'hidden'}); 
    }); 
}); 

をオーバーフローを追加：https://jsfiddle.net/pf9juunm/

より安全なソリューションが状態を切り替えるためにクラスを使用するようになります。

$(document).ready(function() { 
    $('.btn-newcontact').on('click', function(e) { 
    $('#change-contact').addClass('active'); 
    $('.lockdown').modal('hide'); 
    }); 


    $('.lockdown').on('hidden.bs.modal', function() { 
    if ($('#change-contact.active').length) $('#change-contact').modal('show'); 
    $('#change-contact').removeClass('active'); 
    }); 
}); 

https://jsfiddle.net/pf9juunm/1/

Answer 3

これはBootstrapモーダルからの不具合かもしれません。 https://jsfiddle.net/z904fzcm/1/

Answer 4

は、それが追加されます：

の回避策は、あなたがまた、このbody { padding-right: 0 !important }

デモを行うことができ.lockdown

を呼び出す前にfadeまたは設定されたタイムアウト（〜500ミリ秒）を除去することにより、アニメーションを削除することができます身体の詰まっているので、それはわずかにシフトしています。 jQueryでそのパディングを削除してみてください。

あなたは身体からスタイル属性を削除するremoveAttrを試すことができます。コードはオープン/クローズモーダルに変更する方法を見て

$('body').removeAttr('style');