Boostrap modal: Allow background scrolling / interaction

Question

I've been piecing together how to make a modal that is relatively unobtrusive. What I want is for the site visitor to still be able to scroll and interact with the background while the modal is still open.

the modal

<div class="modal fade bd-example-modal-sm profile-completeness-modal" tabindex="-1" role="dialog" aria-labelledby="profile-completeness-modal" aria-hidden="true" data-keyboard="false" data-backdrop="false">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title">You're almost there!</h6> <a class="close" data-dismiss="modal">&times;</a>
      </div>
      <div class="modal-body">
          Your profile is <span id="profile-completeness-percent"><?php echo $user->getProfileCompleteness() ?></span>% complete.
          <br />
          <a href="/profile/edit#details">Click to finish your profile.</a>
      </div>
  </div>
</div>

css

.profile-completeness-modal{
  pointer-events: none;
}
.profile-completeness-modal .modal-dialog {
  position: fixed;
  left: 0px;
  bottom: 0px;
  margin-left: 5%;
}
.profile-completeness-modal .modal-backdrop {
  display: none;
}
.profile-completeness-modal .modal-open .modal {
    width: 300px;
    margin: 0 auto;
}

This allows set up allows me to interact with the background (click links, etc) however, I can't scroll until the modal is closed.The modal doesn't have any features that need to scroll in its body.

Answer 1

.modal-open { overflow-y: auto; }