css - Boostrap modal：允许背景滚动/交互

Question

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

情态的

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

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

标签： cssscrollbootstrap-modal

Answer 1

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