2016-11-28 5 views
1

Ich habe ein Bootstrap-Modal, das ein anderes Bootstrap-Modal aufruft.Bootstrap Modal innerhalb Bootstrap Modal bricht innerer Bootrap Modal Scrollen

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

+0

während dies nicht dein Problem löst: Aus der Sicht der Benutzer sind diese gestapelten Mods eher nervig. Ich denke, das ist auch der Grund, warum sie scheinbar nicht unterstützt werden. Ich denke, es wäre besser, die Funktionalität der 2. Modalität in den ersten Bereich zu integrieren. Wenn dies nicht möglich ist, besuchen Sie http://jschr.github.io/bootstrap-modal/ – nozzleman

Antwort

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' 
});