Question

我正在使用基于Foundation库的网站。我正在我的网站上使用模态创建一个关于“页面”，并尝试均衡模态内的三个不同窗格，如下所示：

  <div id="aboutPage" class="reveal-modal" data-reveal>
    <h1>About</h1>
    <div class="row" data-equalizer>
      <div class="large-4 columns panel" data-equalizer-watch>
        <h2>About This Site</h2>
        <p>This site is intended to provide a resource for people learning to program in Swift.</p>
      </div>
      <div class="large-4 columns panel" data-equalizer-watch>
        <h2>What's Coming Up</h2>
        <p>We're working on smoothing over some glitches with the brand new Issue tracking systems. We also have some exciting updates planned involving this site's mobile version.</p>
      </div>
      <div class="large-4 columns panel" data-equalizer-watch>
        <h2>Using the Help Menu</h2>
        <p>The Help menu quickly lets you contact Support to address issues which may present themselves as you program in Swift. If a representative is not available when you submit your question, we will address your issue as soon as possible. You will
          receive a notification badge when the issue has been resolved.</p>
      </div>
    </div>
    <a class="close-reveal-modal" id="x">&#215;</a>
  </div>

但是，当我查看模态时，面板没有均衡。对于我试图做同样事情的其他几种模态也是如此。尽管如此，我还是能够成功地平衡模态之外的面板。这是一个与模态相关的错误/功能，如果有的话，有什么方法吗？

Answer 1

打开显示模式后，您需要重新计算均衡器面板的高度。

// Once the Reveal Modal has been opened . . .
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
    // Force Foundation to recalculate the Equalizer panel heights
    Foundation.libs.equalizer.reflow();
});

以下是codepen中的一个工作示例。

我希望有所帮助。

Answer 2

在基金会6中，我遇到了同样的问题。这是最终对我有用的解决方案。

<script>
  $(document).foundation();
      $('.reveal').on('open.zf.reveal', function() {
      //force equalizer to fire AFTER modal has finished opening
      Foundation.reInit('equalizer');
  });
</script>

如何在Foundation模型中使用均衡器？

2 个答案: