如果Thickbox打开设置body noscroll答案

【问题标题】：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' ); } }); });