Background scrollbar disappears when opening modal

Question

I have a page where I have a floating, draggable modal, allowing me access to the background while the modal is open. The following works in every way other than the vertical scrollbar in the background disappears. How can I keep the background scrollable?

CSS

#myModal {
  position: relative;
}

.modal-dialog {
  position: fixed;
  width: 50%;
  margin: 0;
  padding: 10px;
}

HTML

<button id="openModal">Show Modal</button>
... lines of text ...

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Draggable Modal</h4>
      </div>
      <div class="modal-body">
        Modal Body
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

SCRIPT

$('#openModal').click(function() {
  if (!($('.modal.in').length)) {
    $('.modal-dialog').css({
      top: 0,
      left: 0
    });
  }
  $('#myModal').modal({
    backdrop: false,
    show: true
  });

  $('.modal-dialog').draggable({
    handle: ".modal-header"
  });
});

https://jsfiddle.net/3c09qkag/

Answer 1

Every time the Modal opens, class .modal-open is added to the body tag - and this class contains overflow:hidden.

This can be fixed by adding this:

.modal-open {
  overflow: inherit;
}

Now you'll find that opening the Modal suddenly causes a scroll to the bottom; which is also why the Button was disappearing from view on every click...

You'll probably have to experiment further to prevent the scrolling from happening, it could be because the div or something in it gets focus just before it is shown as a modal.

Answer 2

This fix everything, but I don't know if it suit your case. Is your modal supposed to be in position relative?

Because by default to make it work correctly, the modal is fixed. That prevent the auto scroll to the bottom

https://jsfiddle.net/3c09qkag/12/

.modal-dialog {
  position: fixed;
  width: 50%;
  margin: 0;
  padding: 10px;
}

.modal-open {
  overflow: inherit;
}