Foundation 模态框 - 学习 Foundation 5 - 简单教程，简单编程

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

Foudation 通过在在容器元素上(如 <div id="myModal" )使用唯一 ID，并添加 .reveal-modal CSS 类和 data-reveal 属性创建模态框

然后可以在任何元素上使用 data-reveal-id="id" 属性打开模态框， id 必须与容器 id 一致("myModal")

如果想要在在点击模态框之外的区域来关闭模态框，则需要在模态框的关闭按钮 <a> 标签上添加 .close-reveal-modal CSS 类

模态框需要初始化 Foundation JS

<button type="button" class="button" data-reveal-id="myModal">打开模态框</button>
<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>

<script>
$(document).ready(function() {$(document).foundation();})
</script>

运行范例 »

模态框大小

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

.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

<a href="#" class="button" data-reveal-id="myModal">打开模态框</a>
<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>
<div id="secondModal" class="reveal-modal" data-reveal>
    <h2>Tada! Second Modal</h2>  
    <p>Some text..</p>
    <a class="close-reveal-modal">&times;</a>
</div>

运行范例 »

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

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

运行范例 »