如何解决Zurb Foundation的Reveal/Modal模态框无法触发的问题

问题原因 #

你遗漏了Foundation框架的初始化步骤，这是Foundation 6+所有交互组件生效的必要前提，未初始化时框架不会绑定任何交互事件，所以控制台不会报错但点击无响应。

解决步骤 #

1. 先清理重复引入的JS文件
   你已经引入了完整的foundation.min.js，该文件已内置核心库、reveal组件和所有工具依赖，无需再单独引入Foundation.core.min.js、foundation.reveal.min.js以及各类util工具JS，重复引入反而可能导致冲突，先把这些单独引入的资源删除即可。

2. 添加Foundation初始化代码
   在所有JS资源引入的末尾，添加如下初始化代码：

$(document).ready(function(){
  $(document).foundation();
});

完整可运行参考代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 引入Foundation CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css">
</head>
<body>
<!-- 你的页面结构 -->
<p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>

<div class="reveal" id="exampleModal1" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <p class="lead">Your couch. It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<!-- 引入JS，注意顺序：先jQuery，再Foundation JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js"></script>
<!-- 初始化Foundation -->
<script>
  $(document).foundation();
</script>
</body>
</html>

可选排查项 #

如果按上述操作后仍无法运行，可逐一排查以下问题：

• 确认JS引入顺序正确：必须先加载jQuery，再加载Foundation的JS文件
• 确认按钮的data-open属性值和模态框的id完全一致，注意大小写敏感
• 排查是否有其他自定义JS代码阻止了按钮的点击事件冒泡

内容的提问来源于stack exchange，提问作者MeltingDog