Bootstrap Modal innerhalb Bootstrap Modal bricht innerer Bootrap Modal Scrollen

Question

Ich habe ein Bootstrap-Modal, das ein anderes Bootstrap-Modal aufruft.

Mein erstes Modal ist vertikal scollable. Wenn ich jedoch mein zweites Modal öffne und es wieder schließe, kann das erste Modal nicht mehr gescrollt werden.

Mein erstes Modal ist viel größer, also muss es offen sein, während das 2. Modal modal darüber ist.

http://www.bootply.com/eoiFo2yfPb

Demo starten modal

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

Die Frage before gefragt wurde, aber es hat keine funktionierende Code-Link oder Arbeits Antwort

Answer 1

Es scheint ein Fehler in Bootstrap zu sein . Die Klasse "modal-open" wird dem Körper hinzugefügt, wenn Sie ein Modal öffnen, und wird entfernt, wenn Sie ein Modal schließen. Diese Klasse ermöglicht das Scrollen des Modals.

Bitte verwenden Sie diese Abhilfe:

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

Answer 2

vielleicht zu spät ist, fanden diese

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

nur die enge Ereignis binden und "modal-open" Klasse Körper hinzufügen. hat für mich gearbeitet.