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

这允许设置，使我可以与背景进行交互（单击链接等），但是直到模态关闭后我才能滚动。模态没有任何需要在其主体中滚动的功能。 / p>

Answer 1

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

Boostrap模态：允许背景滚动/交互

1 个答案: