【问题标题】:If Thickbox is opened set body noscroll如果Thickbox打开设置body noscroll
【发布时间】:2014-01-04 02:25:11
【问题描述】:

我的 JS/jQuery 知识非常基础,所以在这里寻求帮助。

我正在尝试使用Thickbox 实现类似Pinterest 的效果。

我假设应该使用 JS 或 jQuery 来监控Thickbox 操作(如果存在或不存在#TB_window)并应用以下规则:

  • 如果打开Thickbox -> 设置body style to overflow: hidden
  • Else Thickbox 已关闭 -> 将正文样式设置为溢出:自动

我正在使用集成到 WordPress 中的 Thickbox 函数 - add_thickbox();如果有什么不同的话。

【问题讨论】:

  • 你在使用this吗?
  • 是的,但是内置在 WordPress 中。

标签: javascript jquery wordpress thickbox


【解决方案1】:

我不确定页面的构造,但下面的代码应该通过一些调整来修复它

$(document).ready(function(){
    $('.element').click(function(){
        $('.body').css({'overflow':'hidden'});
    });
    $('.overlay, .close-button').click(function(){
        $('body').css({'overflow':'visible'});
    });
});

只需将以下内容替换为正确的类名

.element - 打开Thickbox的可点击链接或图像的类
.overlay -Thickbox后面的半透明覆盖层的类.close-button - 如果需要,Thickbox 上的关闭按钮的类

【讨论】:

  • 稍微调整一下就可以了。单击时,它会将溢出隐藏分配给正文。但问题是,Thickbox 内容在 iframe 内被调用,并且 iframe 内的内容具有正文标记(以及所有内容),当单击隐藏/关闭按钮时,iframe 中的正文标记溢出:自动,而不是实际正文页面上的标签。知道如何解决这个问题吗?
  • 我想说解决这个问题的最简单方法是在页面的 body 标签中添加一个类并将 $('body') 更改为 $('.body-class'),希望这应该可以解决问题!
  • 还是没有运气。我认为问题可能在于使用 $(document).ready(function()) 因为 iframe 是在此类之后加载的,因此它不会从 Thickbox 中获取新添加的 id 和类。但是我还应该使用什么?
  • 事实证明,Thickbox 有很多替代品,其中一些内置了这些功能......例如使用 Colorbox,有一些功能会在打开、加载、完成、清理和关闭。所以使用上面提到的方法,我可以用这样的代码做我想做的事:$(document).ready(function(){ $(".colorbox").colorbox({ onOpen:function(){ $( '#main-body' ).addClass( 'noscroll' ); }, onClosed:function(){ $( '#main-body' ).removeClass( 'noscroll' ); } }); });
猜你喜欢
  • 1970-01-01
  • 2013-06-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-08-08
  • 1970-01-01
相关资源
最近更新 更多