Bootstrap ：如何在移动的上滑动刷新全屏模式

r6l8ljro 于 2023-03-10 发布在 Bootstrap

关注(0)|答案(1)|浏览(176)

我正在使用Bootstrap 5全屏模式，并试图找出如何在移动的上通过向下滑动来刷新页面。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal modal-blur fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

twitter-bootstrap

来源：https://stackoverflow.com/questions/75605597/bootstrap-how-to-swipe-refresh-full-screen-modal-on-mobile

1条答案

按热度按时间

j8ag8udp1#

在移动的上显示模态时拉入刷新被禁用的原因是，当显示模态时，bootstrap会将overflow: hidden添加到页面的body元素中。防止这种行为的一个非常简单的方法是使用以下javascript代码：

//Get the modal by its id
    let modal = document.getElementById("exampleModal");
    
    //Subscribe to the "shown" event of the modal
    modal.addEventListener("shown.bs.modal", () => {
          //Remove the overflow: hidden on the body
          document.body.style.overflow = null;
    });

Bootstrap 文档说明如下：
模态是用HTML、CSS和JavaScript构建的，它们位于文档中的所有内容之上，并从<body>中删除滚动，以使模态内容滚动。
因此，在使用此解决方案时要小心，因为根据您的用例，它可能会带来一些副作用。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal modal-blur fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script>
//Get the modal by its id
let modal = document.getElementById("exampleModal");

//Subscribe to the "shown" event of the modal
modal.addEventListener("shown.bs.modal", () => {
      //Remove the overflow: hidden on the body
      document.body.style.overflow = null;
});
</script>

赞(0）回复(0）举报 2023-03-10

我来回答

Bootstrap ：如何在移动的上滑动刷新全屏模式

1条答案

相关问题

热门标签

最新问答