Question

这是我用来显示弹出窗口然后单击禁用它的脚本。滚动超过某个限制时弹出窗口显示，然后一直保持到单击关闭图像为止。

<script>
$(document).ready(function(){

  $('#popupbackground').hide();
  $('#popup').hide();
  $('img#close').hide();

    $(window).scroll(function(){
      if($(document).scrollTop() > 325){
        $('#popupbackground').fadeIn(750);
        $('#popup').fadeIn(750);
        $('img#close').fadeIn(750);
      }
    });  
    $("img#close").click(function(){
        $("#popupbackground").hide();
        $("#popup").hide();
        $("img#close").hide();
    });
});
</script>

这很好但我现在遇到的问题是当点击关闭img并且弹出窗口消失时，当用户再次滚动时它会重新出现。

什么是禁用弹出窗口重新显示的简单轻量级方法？

Answer 1

如果您在显示弹出窗口后不再需要跟踪滚动事件，则应该＆＃34;取消绑定＆＃34;你的经纪人。例如：

$(document).ready(function(){

  $('#popupbackground').hide();
  $('#popup').hide();
  $('img#close').hide();

  function handleWindowScroll() {
    if($(document).scrollTop() > 325){
      $(window).off('scroll', handleWindowScroll);
      $('#popupbackground').fadeIn(750);
      $('#popup').fadeIn(750);
      $('img#close').fadeIn(750);
    }
  }
  $(window).on('scroll', handleWindowScroll);

  $("img#close").click(function(){
    $("#popupbackground").hide();
    $("#popup").hide();
    $("img#close").hide();
  });
});

请注意，object.on（＆＃39; click＆＃39;，handler）与jQuery中的object.click（handler）相同。

如果您仍需要跟踪滚动事件并且解绑解决方案无法正常工作，则可以改为使用变量：

$(document).ready(function(){
  var popupShown = false;

  $('#popupbackground').hide();
  $('#popup').hide();
  $('img#close').hide();

  $(window).scroll(function(){
    if(!popupShown && $(document).scrollTop() > 325){
      popupShown = true;
      $('#popupbackground').fadeIn(750);
      $('#popup').fadeIn(750);
      $('img#close').fadeIn(750);
    }
  });
  $("img#close").click(function(){
    $("#popupbackground").hide();
    $("#popup").hide();
    $("img#close").hide();
  });
});

Answer 2

你可以通过多种方式实现这一目标：

1）设置一个变量来阻止弹出窗口

<script>
$(document).ready(function(){

  $('#popupbackground').hide();
  $('#popup').hide();
  $('img#close').hide();
  var hasClosed = false;

    $(window).scroll(function(){
      if($(document).scrollTop() > 325 && !hasClosed){
        $('#popupbackground').fadeIn(750);
        $('#popup').fadeIn(750);
        $('img#close').fadeIn(750);
      }
    });  
    $("img#close").click(function(){
        hasClosed = true;
        $("#popupbackground").hide();
        $("#popup").hide();
        $("img#close").hide();
    });
});
</script>

2）打开弹出窗口后，删除滚动触发器（可选）

<script>
$(document).ready(function(){

  $('#popupbackground').hide();
  $('#popup').hide();
  $('img#close').hide();
  var openPopup = function(){
      if($(document).scrollTop() > 325){
        $('#popupbackground').fadeIn(750);
        $('#popup').fadeIn(750);
        $('img#close').fadeIn(750);
      }
  }

    $(window).on('scroll', openPopup );  
    $("img#close").click(function(){
        $(window).off('scroll', openPopup );
        $("#popupbackground").hide();
        $("#popup").hide();
        $("img#close").hide();
    });
});
</script>

第二个效果最好，因为它阻止jQuery在发生一次后触发对scrollTop（）的检查。第一个选项将继续检查，但由于false布尔值

而不会触发

jquery如何在单击另一个事件时禁用滚动事件

2 个答案: