jQuery实现弹窗下底部页面禁止滑动效果

下面是详细的攻略：

需求描述

在使用弹窗作为页面交互组件的时候，我们通常需要禁止页面在弹窗打开的过程中滑动。本文将介绍使用 jQuery 实现在弹窗弹出的同时禁止页面的滑动，并在弹窗关闭后恢复页面的滑动。

实现思路

实现这个效果主要分为以下两个步骤：

在弹窗弹出的时候，为 body 添加一个 overflow: hidden 样式，并记录当前的滚动位置；
在弹窗关闭的时候，将 body 的 overflow 样式和滚动位置恢复到之前的状态。

实现步骤

第一步：弹出弹窗

在弹窗弹出的时候，我们需要为 body 添加一个 overflow: hidden 样式，并记录当前的滚动位置。具体实现方式如下：

// 获取当前的滚动位置
var scrollTop = $(window).scrollTop();

// 为 body 添加样式，并记录当前滚动位置
$('body').css({
  'overflow': 'hidden',
  'position': 'fixed',
  'top': '-' + scrollTop + 'px',
  'left': '0',
  'right': '0',
  'bottom': '0'
});

第二步：关闭弹窗

在弹窗关闭的时候，我们需要将 body 的 overflow 样式和滚动位置恢复到之前的状态。具体实现方式如下：

// 恢复 body 的样式和滚动位置
$('body').css({
  'overflow': '',
  'position': '',
  'top': '',
  'left': '',
  'right': '',
  'bottom': ''
});
$(window).scrollTop(scrollTop);

示例说明

下面是两个示例，分别演示了如何在弹窗弹出的时候禁止页面滑动，并在弹窗关闭后恢复页面滑动。

示例一：通过点击按钮弹出弹窗

<button id="open-dialog">打开弹窗</button>
<div id="dialog" style="display:none;">这是一个弹窗</div>

$(function() {
  // 记录当前的滚动位置
  var scrollTop = 0;
  // 点击按钮打开弹窗
  $('#open-dialog').click(function() {
    // 获取当前的滚动位置
    scrollTop = $(window).scrollTop();
    // 为 body 添加样式，禁止滑动
    $('body').css({
      'overflow': 'hidden',
      'position': 'fixed',
      'top': '-' + scrollTop + 'px',
      'left': '0',
      'right': '0',
      'bottom': '0'
    });
    // 显示弹窗
    $('#dialog').show();
  });

  // 关闭弹窗
  $('#dialog').click(function() {
    // 隐藏弹窗
    $(this).hide();
    // 恢复 body 的样式和滚动位置
    $('body').css({
      'overflow': '',
      'position': '',
      'top': '',
      'left': '',
      'right': '',
      'bottom': ''
    });
    $(window).scrollTop(scrollTop);
  });
});

示例二：通过滚动页面触发弹窗

<div id="scroll-container">
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一段文字</p>
  <p>这是一个按钮，点击它会弹出一个弹窗</p>
  <button id="open-dialog">打开弹窗</button>
</div>
<div id="dialog" style="display:none;">这是一个弹窗</div>

$(function() {
  // 记录当前的滚动位置
  var scrollTop = 0;
  // 监听页面滚动事件
  $(window).scroll(function() {
    // 如果页面滚动到了一定位置，就弹出弹窗
    if($(this).scrollTop() > 200) {
      // 获取当前的滚动位置
      scrollTop = $(window).scrollTop();
      // 为 body 添加样式，禁止滑动
      $('body').css({
        'overflow': 'hidden',
        'position': 'fixed',
        'top': '-' + scrollTop + 'px',
        'left': '0',
        'right': '0',
        'bottom': '0'
      });
      // 显示弹窗
      $('#dialog').show();
    }
  });

  // 关闭弹窗
  $('#dialog').click(function() {
    // 隐藏弹窗
    $(this).hide();
    // 恢复 body 的样式和滚动位置
    $('body').css({
      'overflow': '',
      'position': '',
      'top': '',
      'left': '',
      'right': '',
      'bottom': ''
    });
    $(window).scrollTop(scrollTop);
  });
});

结束

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现弹窗下底部页面禁止滑动效果 - Python技术站