1

I have a bootstrap modal that callls another bootstrap modal.

My first modal is vertically scollable. However when I open my 2nd modal and close it again it doesn't allow the first modal to be scrolled anymore.

My first modal is much larger so it has to be open while the 2nd modal is being modal over it.

http://www.bootply.com/eoiFo2yfPb

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

The question has been asked before but it has no working code link or working answer

Community
  • 1
  • 1
dev2go
  • 1,539
  • 3
  • 13
  • 15
  • while this doesn't solve you issue: From a users perspective i think those stacked modals are rather annoying. i think thats also why they seem to be unsupported. i think it would be better to incorporate the 2nd modals functionality into the 1st ones scope. if this is not an option, check out http://jschr.github.io/bootstrap-modal/ – nozzleman Nov 28 '16 at 14:23

2 Answers2

2

It seems to be a bug in Bootstrap. The class "modal-open" is added to the body when you open a modal, and is removed when you close a modal. This class is the one which is making it possible to scroll the modal.

Please use this workaround:

$('#btnUploadCancel').click(function(){
    $('#upload-avatar').modal('toggle');
    $('body').addClass('modal-open'); // This recovers the class 'modal-open'
});
JoaoRibeiro
  • 808
  • 7
  • 24
  • 1
    I know this is a late answer. But for the sake of anyone finding this, this one will almost work...but not quite. The modal-open is removed in an event that occurs after the click handler. Instead, recover the modal-open in the hidden.bs.modal event handler of the closing modal. – superguppie Nov 22 '18 at 12:55
1

maybe is too late, found this

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

just bind the close event and add "modal-open" class to body. worked for me.

hans k
  • 11
  • 2