javascript - 如何使用jQuery和Zurb Foundation 5向主体添加/删除CSS溢出到主体

我正在使用Zurb Foundation 5 Reveal Modal，遇到一个小问题，即弹出窗口允许人们在打开时向下滚动页面，因此简单的解决方法是将overflow:hidden添加到body。我使用了以下有效的代码，但是一旦关闭了模式，就会使页面溢出保持隐藏状态。

(function($) {
    var $body = $('body');
        $body.on('open.fndtn.reveal', function(){
        $body.css('overflow', 'hidden').off('open.fndtn.reveal');
    });
})(jQuery);

因此，我修改了代码，以便在关闭模态时将主体设置回overflow: inherit。

(function($) {
    var $body = $('body');
        $body.on('open.fndtn.reveal', function(){
        $body.css('overflow', 'hidden').off('open.fndtn.reveal');
    });
        $body.on('close.fndtn.reveal', function(){
        $body.css('overflow', 'inherit').off('close.fndtn.reveal');
    });
})(jQuery);

乍一看，这很好，但是重复多次打开和关闭模态的过程会使溢出变为固定的inherit状态。

编辑：看演示，它似乎将overflow: hidden和auto添加到正文，但在我身上却没有。我已经更新到最新的Zurb Foundation 5和jQuery，但是仍然存在此问题。

我做了一个Zurb Foundation 5 (v5.5.3) jsFiddle base和另一个jsFiddle with Zurb Foundation Reveal，复制了我遇到的问题。我只能看到的是，他们正在使用某种自定义JavaScript。

最佳答案

您可以像这样绑定事件，有关详细信息，请参见http://foundation.zurb.com/sites/docs/v/5.5.3/components/reveal.html。

$(document).on('open.fndtn.reveal', '[data-reveal]', function () {
  $('body').css('overflow', 'hidden');
});
$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
  $('body').css('overflow', 'visible');
});

我做了一个CodePen示例，请在此处查看http://codepen.io/shoaibik/full/BKEZep/

更新资料

我还在显示演示页面上找到了，一旦打开模态，溢出就会被隐藏。我从基础文档复制了文件，并且无需额外的JS代码即可工作。
我创建了一个新的CodePen示例。 http://codepen.io/shoaibik/pen/KzYvNe

关于javascript - 如何使用jQuery和Zurb Foundation 5向主体添加/删除CSS溢出到主体，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37212049/