如何使用jQuery&Zurb Foundation 5 Reveal Modal

How to Add/Remove CSS Overflow to body using jQuery & Zurb Foundation 5 Reveal Modal

本文关键字：Foundation Reveal Modal Zurb 何使用 jQuery amp      更新时间：2023-09-26

我正在使用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添加到了主体中，但在我的演示中没有。我已经更新到最新的ZurbFoundation5和jQuery，但仍然存在这个问题。

我已经制作了一个Zurb Foundation 5（v.5.3）jsFiddle基础和另一个带有Zurb Foundation Reveal的jsFiddl，复制了我的问题。我唯一能看到的是，他们正在使用某种自定义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

相关文章：