小程序显示弹窗时禁止下层的内容滚动实现方法

要禁止下层的内容滚动，我们可以通过以下步骤实现：

1. 给body元素添加样式

我们可以给 <body> 元素添加样式来实现下层内容的禁止滚动。将下面的样式代码添加到你页面的CSS文件或页面内嵌的style标签中。

body.modal-open {
  overflow: hidden;
}

这将将窗口的滚动条隐藏，并禁止滚动。

2. JS代码

为了在弹窗打开时添加样式，我们需要一些 JavaScript 代码。这里以jQuery为例：

$(document).ready(function(){
  $('.modal').on('show.bs.modal', function (event) {
    $('body').addClass('modal-open');
  });

  $('.modal').on('hide.bs.modal', function (event) {
    $('body').removeClass('modal-open');
  });
});

如上代码所示，当弹窗显示时（即 'show.bs.modal' 事件被触发），将 modal-open 类添加到 <body> 元素。隐藏弹窗时（即 'hide.bs.modal' 事件被触发），将 modal-open 类从 <body> 元素移除。这将启用和禁用我们在第1步中添加的样式。

示例一

以下是一个使用Bootstrap框架的实例。假设我们有一个按钮，点击后弹出窗口。我们使用Bootstrap的模态框（Modal）组件实现窗口弹出。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Modal Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <style>
    body.modal-open {
      overflow: hidden;
    }
  </style>
</head>
<body>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>

  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    $(document).ready(function(){
      $('.modal').on('show.bs.modal', function (event) {
        $('body').addClass('modal-open');
      });

      $('.modal').on('hide.bs.modal', function (event) {
        $('body').removeClass('modal-open');
      });
    });
  </script>
</body>
</html>

当我们点击按钮时，模态框将弹出。此时窗口下面的滚动将被禁止，并隐藏滚动条。

示例二

以下示例展示了一个自定义的弹窗。我们通过手写HTML和CSS创建了样式，通过JavaScript代码将其绑定到触发器上。

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Disable Background Scroll when opening a modal</title>
  <style>
    body.modal-open {
      overflow: hidden;
    }
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }
    .modal-wrapper {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      width: 50%;
      padding: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      z-index: 9999;
    }
  </style>
</head>
<body>
  <button id="open-modal">Open Modal</button>

  <div class="modal-overlay"></div>
  <div class="modal-wrapper">
    <h2>Modal Title</h2>
    <p>Modal Content goes here...</p>
    <button id="close-modal">Close Modal</button>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#open-modal').on('click', function() {
        $('.modal-overlay, .modal-wrapper').fadeIn();
        $('body').addClass('modal-open');
      });

      $('#close-modal, .modal-overlay').on('click', function() {
        $('.modal-overlay, .modal-wrapper').fadeOut();
        $('body').removeClass('modal-open');
      });
    });
  </script>
</body>
</html>

我们的自定义弹窗将于页面加载时隐藏。当我们点击 "Open Modal" 按钮时，弹窗将显示。此时窗口下面的滚动将被禁止，并隐藏滚动条。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：小程序显示弹窗时禁止下层的内容滚动实现方法 - Python技术站

小程序显示弹窗时禁止下层的内容滚动实现方法

1. 给body元素添加样式

2. JS代码

示例一

示例二

相关文章