ブートストラップモード内のブートストラップモーダルは、内部ブーストラップモードスクロールを中断します。

Question

私は別のブートストラップモーダルを呼び出すブートストラップモーダルを持っています。

私の最初のモーダルは縦方向に縮尺可能です。しかし、私が2番目のモーダルを開いて再び閉じると、最初のモーダルがもうスクロールできなくなります。

私の最初のモーダルははるかに大きいので、2番目のモーダルがモーダルである間にオープンしなければなりません。

http://www.bootply.com/eoiFo2yfPb質問がbeforeを頼まれましたが、それは何の作業コードリンクや作業の答えを持っていない

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h4 class="modal-title" id="myModalLabel">Application Form2</h4> 
     </div> 

     <!-- START OF MODAL BODY--> 

     <div class="modal-body">   
       <p>Some text in the modal.</p> 
       <p>Some text in the modal.</p> 
       <p>Some text in the modal.</p> 
       <p>Some text in the modal.</p> 
       <p>Some text in the modal.</p> 
       <p>Some text in the modal.</p> 
       <p>Some text in the modal.</p> 
       <p>Some text in the modal.</p> 
      <p> 

      <a href="#" data-toggle="modal" data-target="#upload-avatar" class="button"><i class="fa fa-plus"></i> Upload new avatar</a> 
      </p> 
     </div> 

     <!-- END OF APPLICATION FORM MODAL BODY --> 

     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 


<!--Modal for uploading photo--> 
<div class="modal" id="upload-avatar" tabindex="-1" role="dialog" aria-labelledby="upload-avatar-title" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h4 class="modal-title" id="upload-avatar-title">Upload new avatar</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Please choose a file to upload. JPG, PNG, GIF only.</p> 
      <form role="form"> 
      <div class="form-group"> 
       <label for="file">File input</label> 
       <input type="file" id="file"> 
       <p class="help-block">Files up to 5Mb only.</p> 
      </div> 
      <button type="button" class="hl-btn hl-btn-default" id="btnUploadCancel">Cancel</button> 
      <button type="button" class="hl-btn hl-btn-green">Upload</button> 
      </form> 
     </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div> 

起動デモモーダル

ブートストラップのバグのようです

Answer 1

。 "modal-open"クラスは、モーダルを開くと本体に追加され、モーダルを閉じると削除されます。 このクラスは、モーダルをスクロールできるようにするクラスです。

この回避策を使用してください：多分

$('#btnUploadCancel').click(function(){ 
    $('#upload-avatar').modal('toggle'); 
    $('body').addClass('modal-open'); // This recovers the class 'modal-open' 
}); 

Answer 2

が遅すぎる、ちょうどクローズイベントを結合して、ボディに「モーダル・オープン」クラスを追加し、この

http://seegatesite.com/how-to-resolve-multiple-modal-dialog-scrollbar-in-bootstrap-v-3-3-5/

を見つけました。私のために働いた。