bootstrap modal内的bootstrap模态会打破内部boostrap模式滚动

Question

我有一个bootstrap模式，可以调用另一个引导模式。

我的第一个模态是垂直可缩放的。但是，当我打开我的第二个模态并再次关闭时，它不允许第一个模态被再次滚动。

我的第一个模态要大得多，所以它必须打开，而第二个模态在模态上。

http://www.bootply.com/eoiFo2yfPb

启动演示模式

<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> 

的问题已经被问before但它没有工作代码的链接或工作答案

Answer 1

这似乎是在引导错误。 当您打开一个模态时，“模态打开”类会添加到主体中，并在关闭模态时被删除。 这个类是可以滚动模态的。

请使用此解决方法：

$('#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/

只是绑定关闭事件，并添加“模式开”类体。为我工作。