Foundation 的 Reveal 弹窗怎么手动关闭？

西门淑霞提问于 2026-03-24 21:02:22 阅读 12

框架

我在用 Foundation 6 的 Reveal 组件，想在用户点击某个按钮后用 JS 手动关掉弹窗，但调用 close() 方法没反应，控制台也不报错。

我试过这样写：

const modal = new Foundation.Reveal(document.getElementById('myModal'));
modal.close();

但弹窗还是开着的，是不是初始化方式不对？或者得用别的方法关？

我来解答赞 0 收藏

反馈

1 条解答

FSD-秀兰 Lv1

在 Foundation 6 中，Reveal 组件的初始化和操作方式可能有点坑人。你提到的初始化方式看起来没问题，但直接调用 close() 可能因为实例化的问题没有生效。正确的做法是先确保 Reveal 实例已经正确初始化，并且可以通过 Foundation 的 API 来操作。

你可以尝试这样做：

首先，确保你的 HTML 结构和初始化代码是这样的：

<div id="myModal" class="reveal" data-reveal>

  <!-- 你的弹窗内容 -->

</div>

<button id="closeButton">Close Modal</button>

然后，在 JavaScript 中这样初始化并关闭弹窗：

// 初始化 Reveal 实例

document.addEventListener('DOMContentLoaded', function() {

  const modal = new Foundation.Reveal($('#myModal'));



  // 监听按钮点击事件来关闭弹窗

  document.getElementById('closeButton').addEventListener('click', function() {

    modal.close();

  });

});

这里的关键点是使用 $('#myModal') 来获取元素，而不是 document.getElementById('myModal')，因为 Foundation 6 的 Reveal 需要 jQuery 对象作为参数。虽然 Foundation 6 可以不依赖 jQuery，但在这种情况下使用 jQuery 可以避免一些不必要的麻烦。

希望这能解决你的问题。如果还是不行，检查一下是否有其他脚本影响了这个功能。有时候其他地方的代码也会捣乱。

2026-03-24 21:03