Question

当弹出窗口淡入时，我正在使用一段非常简单的代码将body overflow更改为hidden。

$(".more").click(function() {
    $(".about-pop").fadeIn(1000);
    $('body').css('overflow', 'hidden');
});


$(".close").click(function() {
    $('body').css('overflow', 'visible');
    $(".about-pop").fadeOut(1000);
});

相关HTML：

<div class="about-pop">
   <div class="about-page-text">
    <?php the_field('about'); ?><br><br><img class="close" src="/images/close.png">
   </div>
</div>

<div class="about-intro">
    <div class="about-intro-wrap">
        <div class="about-intro-text"><?php the_field('about_intro'); ?><br><br><img class="more" src="/images/more.png">
        </div>
     </div>
</div>

我的问题是，当用户点击.more时，视口会跳转到html文档的顶部因此，当用户点击.close时，他们不在同一个地方。我之前使用过这种技术，从来没有遇到过这个问题。

Answer 1

在我的理解中你有一些定位问题，所以我添加了以下样式，它工作正常。请告诉我这是否有帮助或请使用jsfiddle澄清您的问题。

我添加了以下样式

 <style>
  .about-pop {
    display: none;
    position: absolute;
    z-index: 10;
    background: #FFF;
  }

</style>

谢谢

jQuery单击函数更改正文溢出属性

1 个答案: