Bootstrap modal：允许背景滚动/交互答案

【问题标题】：Boostrap modal: Allow background scrolling / interactionBootstrap modal：允许背景滚动/交互
【发布时间】：2019-01-15 01:05:18
【问题描述】：

我一直在拼凑如何制作一个相对不显眼的模态。我想要的是网站访问者在模态仍然打开时仍然能够滚动并与背景交互。

模态

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

这允许设置允许我与背景交互（点击链接等）但是，在模式关闭之前我无法滚动。模式没有任何需要在其主体中滚动的功能。

【问题讨论】：

标签： css scroll bootstrap-modal

【解决方案1】：

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

【讨论】：