# Foundation 模态框 模态框是一个显示在页面头部的弹窗。 我们可以在容器元素上(如 `&lt;div id="myModal"`)使用唯一 ID，并添加 `.reveal-modal` 类和 `data-reveal` 属性来添加模态框。我们可以在任何元素上使用 `data-reveal-id="_id_"` 属性阿里打开模态框。 _id_ 必须与容器 id 一致(实例为 "myModal")。 如果你希望在点击模态框之外的区域来关闭模态框。你可以在模态框的关闭按钮 `&lt;a&gt;` 标签上添加 `.close-reveal-modal` 类来实现。 **注意:** 滑块需要使用 JavaScript。所以你需要初始化 oundation 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>   <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;"> ```