css - 防止模态在移动设备上上下移动？

Question

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered justify-content-center" id="modalInner" role="document">
    <div id="innerContentWrapper">
      <a class="prev">&#10094;</a>
      <a class="next">&#10095;</a>

      <div id="innerContent"></div>
    </div>
  </div>
</div>

我正在使用引导手机制作灯箱画廊。在移动设备上，当用户滑动时，它会使模态上下跳跃。我怎样才能修复它？

标签： cssbootstrap-4

Answer 1

您可以尝试在特定于移动视图的媒体查询中修复其位置：

@media only screen and (max-width : 768px) {
 .modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  }
}