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

时间:2014-05-02 07:55:44

标签: jquery html css

当弹出窗口淡入时,我正在使用一段非常简单的代码将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时,他们不在同一个地方。我之前使用过这种技术,从来没有遇到过这个问题。

1 个答案:

答案 0 :(得分:0)

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

我添加了以下样式

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

</style>

谢谢