Question

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

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添加到正文中，但在我看来却没有。我已经更新到最新的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/

<强>更新

我还找到了揭示演示页面，一旦打开模态，就会隐藏溢出。我复制了基础文档中的文件，并且没有额外的JS代码。我创建了一个新的CodePen示例。 http://codepen.io/shoaibik/pen/KzYvNe

如何使用jQuery＆amp;添加/删除CSS溢出到body Zurb Foundation 5揭示莫代尔

1 个答案: