Foundation 模態框

模態框是一個顯示在頁面頭部的彈窗。

我們可以在容器元素上(如 <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>
  <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;">