如何使用 jQuery 和 Zurb Foundation 5 Reveal Modal 添加/删除 CSS 溢出到正文

Question

我正在使用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。

Answer 1

你可以这样绑定事件，详情见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/

更新

我还发现了 onreveal 演示页面，一旦打开模式，溢出就会隐藏。我从基础文档中复制了文件，它无需额外的 JS 代码即可工作。 我创建了一个新的 CodePen 示例。 http://codepen.io/shoaibik/pen/KzYvNe