了解下Foundation 模态框

最新推荐文章于 2025-06-11 11:02:32 发布

Linux小百科

最新推荐文章于 2025-06-11 11:02:32 发布

阅读量198

点赞数

文章标签： javascript 开发语言 ecmascript

原文链接：https://www.linuxprobe.com/foundation-modal-box.html

版权

文章介绍了如何使用HTML数据属性和FoundationJS库来创建模态框。模态框可以通过添加特定类和ID来定义大小和行为，如tiny,small等。内嵌模态框也是可能的，并可以通过设置data-options属性来控制多个模态框同时打开的行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模态框是一个显示在页面头部的弹窗。

我们可以在容器元素上(如 <div id="myModal")使用唯一 ID，并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-id="id" 属性阿里打开模态框。 id 必须与容器 id 一致(实例为 "myModal")。

如果你希望在点击模态框之外的区域来关闭模态框。你可以在模态框的关闭按钮 <a> 标签上添加 .close-reveal-modal 类来实现。
注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation JS:

实例

<!-- Trigger the Modal -->
<button type="button" class="button" data-reveal-id="myModal">Click To Open Modal</button>
<!-- The Modal Content -->
<div id="myModal" class="reveal-modal" data-reveal>
  <h2>Heading in Modal.</h2>
  <p>Some text in the modal.</p>
  <p>Some text in the modal.</p>
  <a class="close-reveal-modal">&times;</a>
</div>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>

模态框大小

可以在模态框容器上添加以下类来设置模态框的大小：

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

注意: 在平板、笔记本、PC 电脑上默认为 80% 宽度，在小屏幕设备上是 100% 宽度。

实例

<div id="myModal" class="reveal-modal tiny|small|medium|large|xlarge|full" data-reveal>

内嵌模态框

你可以在模态框内嵌入模态框，可以在第一个模态框上添加新的触发按钮。你必须为内嵌模态框设置一个唯一的 id：

实例

<!-- Trigger the modal -->
<a href="#" class="button" data-reveal-id="myModal">Click To Open Modal</a>

<!-- The First Modal -->
<div id="myModal" class="reveal-modal" data-reveal> <h2>First Modal</h2>
  <p>Some text..</p>
  <p><a href="#" data-reveal-id="secondModal" class="button">Open Second Modal</a></p>
<a class="close-reveal-modal">&times;</a>
</div>
<!-- The Second Modal -->
<div id="secondModal" class="reveal-modal"data-reveal>
  <h2>Tada! Second Modal</h2>
<p>Some text..</p>
  <aclass="close-reveal-modal">&times;</a>
</div>

第二个模态框会取代第一个模态框。如果你希望在打开第二个模态框时，不关闭第一个模态框。可以在第二个模态框上添加 data-options="multiple_opened:true;" 属性：

实例

<div id="secondModal" class="reveal-modal" data-reveal data-options="multiple_opened:true;">