# 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;"> ```