WP Media Uploader modal conflicts with Bootstrap modal

Question

I was creating a form in a Bootstrap Modal to allow users to create new posts from the frontend. Everything seemed alright until I wanted to upload a file to the media library or choose one already uploaded:

This opens another modal using JS from the WordPress core. Unfortunately both BS and WP modals are using the same class on the body tag to indicate an opened modal: modal-open. When closing the secondly opened (WP) modal, this class is removed from the body which results to unwanted behaviour. You can scroll the document in the background but not the modal itself.

How could one fix this conflict?

Answer 1

Just proxy the modal-open class for Bootstrap like this:

.bs-modal-open {
  overflow: hidden;
}

.bs-modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

// or using sass …

.bs-modal-open {
  @extend .modal-open;
}

Add/remove the bs-modal-open class to the body when opening/closing a BS modal:

$('.bs-modal')
  .on('show.bs.modal', function (e) {
    $('body').addClass('bs-modal-open');
  })
  .on('hidden.bs.modal', function (e) {
    $('body').removeClass('bs-modal-open');
  });

Finally add the bs-modal class to each of your BS modals:

<div class="modal bs-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  …
</div>