Foundation 模态框

在 Foundation 框架中，您可以使用 Reveal 组件来创建模态框（弹出窗口）。 Reveal 是一个 jQuery 插件，方便您在页面上添加模态框功能。

基本用法：

1. 触发模态框的元素： 在需要触发模态框的元素上，添加 data-open 属性，值为模态框的 ID。 例如： <button class="button" data-open="myModal">点击打开模态框</button>
2. 模态框的结构： 创建一个具有唯一 ID 的 div，并添加 reveal 类和 data-reveal 属性。 例如： <div id="myModal" class="reveal" data-reveal> <h2>模态框标题</h2> <p>这里是模态框的内容。</p> <button class="close-button" data-close aria-label="关闭模态框" type="button"> <span aria-hidden="true">&times;</span> </button> </div>

初始化：

在页面加载完成后，初始化 Foundation 的 Reveal 插件：

<script>
  $(document).foundation();
</script>

模态框大小：

您可以通过添加不同的类来设置模态框的大小：

• .tiny：宽度为 30%
• .small：宽度为 40%
• .medium：宽度为 60%
• .large：宽度为 70%
• .xlarge：宽度为 95%
• .full：宽度和高度为 100%

例如：

<div id="myModal" class="reveal small" data-reveal>
  <!-- 模态框内容 -->
</div>

嵌套模态框：

您可以在一个模态框内嵌套另一个模态框。 在第一个模态框中添加触发第二个模态框的元素，并为第二个模态框设置唯一的 ID。 例如：

<!-- 第一个模态框 -->
<div id="firstModal" class="reveal" data-reveal>
  <h2>第一个模态框</h2>
  <p>这是第一个模态框的内容。</p>
  <button class="button" data-open="secondModal">打开第二个模态框</button>
  <button class="close-button" data-close aria-label="关闭模态框" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<!-- 第二个模态框 -->
<div id="secondModal" class="reveal" data-reveal>
  <h2>第二个模态框</h2>
  <p>这是第二个模态框的内容。</p>
  <button class="close-button" data-close aria-label="关闭模态框" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

注意事项：

• 默认情况下，点击模态框外部区域或按下 ESC 键会关闭模态框。
• 如果您希望在打开第二个模态框时不关闭第一个模态框，可以在第二个模态框上添加 data-options="multiple_opened:true;" 属性。

有关更多信息和示例，请参阅 Foundation 官方文档中的 Reveal 部分。 citeturn0search3