Zurb Foundation 5 - 通过 JavaScript 显示在另一个显示中触发答案

【问题标题】：Zurb Foundation 5 - Reveal via JavaScript triggered in another revealZurb Foundation 5 - 通过 JavaScript 显示在另一个显示中触发
【发布时间】：2014-04-08 22:54:11
【问题描述】：

我有一个运行 Zurb Foundation 5 的站点，我在一个页面上部署了多个 Reveal 模式。当它们通过$('#DIVID').foundation('reveal', 'open'); 加载时，它们可以正常工作，但是当我使用以下方式通过模态中的按钮触发不同的模态时，我收到了意想不到的结果。

<script>
$('#a_msg').on('click', '#v_update', function () {
$('#a').foundation('reveal', 'close');
$('#v').foundation('reveal', 'open');
});
</script>

第一个模态关闭，然后第二个模态触发，但是当我尝试关闭第二个模态时，单击背景不会关闭它，单击a class="close-reveal-modal" 按钮会关闭模态，但背景仍然是灰色的。

错误

Uncaught TypeError: Cannot read property 'bg_class' of undefined

从下面的foundation.js 源代码看来，第二个模式没有正确初始化。

      S(document)
        .on('click.fndtn.reveal', this.close_targets(), function (e) {

          e.preventDefault();

          if (!self.locked) {
            var settings = S('[' + self.attr_name() + '].open').data(self.attr_name(true) + '-init'),
                bg_clicked = S(e.target)[0] === S('.' + settings.bg_class)[0];
Uncaught TypeError: Cannot read property 'bg_class' of undefined (repeated 2 times)

            if (bg_clicked && !settings.close_on_background_click) {
              return;
            }

            self.locked = true;
            self.close.call(self, bg_clicked ? S('[' + self.attr_name() + '].open') : S(this).closest('[' + self.attr_name() + ']'));
          }
        });

      if(S('[' + self.attr_name() + ']', this.scope).length > 0) {
        S(this.scope)
          // .off('.reveal')
          .on('open.fndtn.reveal', this.settings.open)
          .on('opened.fndtn.reveal', this.settings.opened)
          .on('opened.fndtn.reveal', this.open_video)
          .on('close.fndtn.reveal', this.settings.close)
          .on('closed.fndtn.reveal', this.settings.closed)
          .on('closed.fndtn.reveal', this.close_video);
      } else {
        S(this.scope)
          // .off('.reveal')
          .on('open.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.open)
          .on('opened.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.opened)
          .on('opened.fndtn.reveal', '[' + self.attr_name() + ']', this.open_video)
          .on('close.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.close)
          .on('closed.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.closed)
          .on('closed.fndtn.reveal', '[' + self.attr_name() + ']', this.close_video);
      }

      return true;
    },

有没有人有过从另一个公开显示中的链接正确触发显示的经验？

【问题讨论】：

标签： jquery zurb-foundation

【解决方案1】：

在不同模态之间切换时背景未正确切换。

在最后一个模态关闭后使用以下内容：

$('.reveal-modal-bg').remove();

删除 div 将消除症状（背景覆盖），从而停止 bg_class 未定义的 js 错误。

【讨论】：