揭露

JavaScript Motion UI

模式對話方塊或彈出式視窗，對於原型製作和製作非常方便。Foundation 包含 Reveal，我們的 jQuery 模式外掛程式，讓您輕鬆使用。

基礎

模式只是一個空的容器，因此您可以在其中放入任何類型的內容，從文字、表單、影片到整個網格。

請注意，我們已在 Foundation 6 中移除 AJAX 載入模式的選項。不過，我們讓您能很輕鬆地自行實作，請查看進階區段中的範例。

若要建立模式，請將類別 .reveal、屬性 data-reveal 和一個唯一的 ID 加入容器。

<div class="reveal" id="exampleModal1" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <p class="lead">Your couch. It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

太棒了。我懂了。

你的沙發。是我的。

我是個很酷的段落，住在一個更酷的模態視窗裡。贏了！

你也需要一個開啟模態視窗的方式。將屬性 data-open 加入任何元素。data-open 的值應該是模態視窗的 ID。

<p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>

你也需要一個從內部關閉模態視窗的方式。預設情況下，如果在外部按一下或按下 esc 鍵，模態視窗就會關閉。不過，你通常也會想要加入自己的按一下觸發器。將屬性 data-close 加入模態視窗內的任何元素，即可加入一個觸發器。

你可以使用我們方便的關閉按鈕樣式來執行此動作

<button class="close-button" data-close aria-label="Close modal" type="button">
  <span aria-hidden="true">&times;</span>
</button>

調整大小

在小螢幕上，模態視窗總是螢幕寬度的 100%。在中型螢幕和更大的螢幕上，寬度會變為 600px（請參閱 $reveal-width 設定）。

模態視窗的大小可以使用這些調整大小的類別來變更，這些類別會加入模態視窗容器

.tiny：寬度 30%
.small：寬度 50%
.large：寬度 90%
.full：寬度和高度都是 100%，預設將 escClose 選項設為 true，還會建立一個關閉按鈕。

觀看影片中的此部分

<div class="tiny reveal" id="exampleModal" data-reveal>
  <!-- ... -->
</div>

喔，我超小的

我可能很小，但我的心很大！

我很大，像熊一樣大！

模態視窗可以開啟其他模態視窗。使用唯一的 ID 建立一個第二個模態視窗，然後在第一個模態視窗內加入一個 data-open 按一下觸發器。

<p><button class="button" data-open="exampleModal2">Click me for a modal</button></p>

<!-- This is the first modal -->
<div class="reveal" id="exampleModal2" data-reveal>
  <h1>Awesome!</h1>
  <p class="lead">I have another modal inside of me!</p>
  <button class="button" data-open="exampleModal3">Click me for another modal!</button>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<!-- This is the nested modal -->
<div class="reveal" id="exampleModal3" data-reveal>
  <h2>ANOTHER MODAL!!!</h2>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

太棒了！

我的裡面有另一個模態視窗！

另一個模態視窗！！！

全螢幕

全螢幕模態視窗的寬度和高度都是視窗的 100%。加入 .full 類別讓它開始作用。

觀看影片中的此部分

<p><button class="button" data-toggle="exampleModal8">Click me for a full-screen modal</button></p>

<div class="full reveal" id="exampleModal8" data-reveal>
  <p>OH I'M SO FUUUUL</p>
  <img src="https://placekitten.com/1920/1280" alt="Introspective Cage">
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

喔，我超全的

進階選項

沒有遮罩

若要移除遮罩，請將屬性 data-overlay="false" 加入模態視窗。

<p><button class="button" data-toggle="exampleModal9">Click me for an overlay-lacking modal</button></p>

<div class="reveal" id="exampleModal9" data-reveal data-overlay="false">
  <p>I feel so free!</p>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

我感覺好自由！

動畫

若要使用 Motion UI 函式庫的動畫，請包含 data-animation-in="someAnimationIn" 和 data-animation-out="someAnimationOut" 屬性。如果您想要調整速度或時間，請包含屬性，例如 data-animation-in="someAnimationIn fast"。

觀看影片中的此部分

<p><button class="button" data-toggle="animatedModal10">Click me for a modal</button></p>

<div class="reveal" id="animatedModal10" data-reveal data-close-on-click="true" data-animation-in="spin-in" data-animation-out="spin-out">
  <h1>Whoa, I'm dizzy!</h1>
  <p class="lead">There are many options for animating modals, check out the Motion UI library to see them all</p>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

哇，我頭暈了！

有許多用於動畫化對話框的選項，查看 Motion UI 函式庫以查看所有選項

AJAX

若要使用 AJAX 載入對話框內容，請使用下列程式碼片段。

var $modal = $('#modal');

$.ajax('/url')
  .done(function(resp){
    $modal.html(resp).foundation('open');
});

輔助功能

預設情況下，對話框可透過使用各種 ARIA 屬性來存取。若要讓對話框更易於存取，請透過將 aria-labelledby="exampleModalHeader11" 新增至容器，以及將 id="exampleModalHeader11" 新增至您想要指定為標籤的元素，來為對話框指定標籤。

<p><button class="button" data-open="exampleModal11">Click me for a modal</button></p>

<div class="reveal" id="exampleModal11" aria-labelledby="exampleModalHeader11" data-reveal>
  <h1 id="exampleModalHeader11">Label for the Modal!</h1>
  <p class="lead">I am even more accessible than the other modals.</p>
  <button class="close-button" data-close aria-label="Close Accessible Modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

對話框標籤！

我比其他對話框更易於存取。

Sass 參考

變數

此元件的預設樣式可以使用專案的設定檔中的這些 Sass 變數進行自訂。

名稱	類型	預設值	說明
`$reveal-background`	顏色	`$white`	對話框的預設背景顏色。
`$reveal-width`	數字	`600px`	對話框的預設寬度，沒有套用類別。
`$reveal-max-width`	數字	`$global-width`	對話框的預設最大寬度。
`$reveal-padding`	數字	`$global-padding`	對話框內部的預設內距。
`$reveal-border`	數字	`1px solid $medium-gray`	對話框周圍的預設邊框。
`$reveal-radius`	數字	`$global-radius`	對話框的預設半徑。
`$reveal-zindex`	數字	`1005`	對話框的 z-index。覆蓋層使用此值，而對話框本身使用此值加一。
`$reveal-overlay-background`	顏色	`rgba($black, 0.45)`	對話框覆蓋層的背景顏色。

混合

我們使用這些混合來建構此元件的最終 CSS 輸出。您可以自行使用混合，從我們的元件建構您自己的類別結構。

reveal-overlay

@include reveal-overlay($background);

新增對話框覆蓋層的樣式。

參數	類型	預設值	說明
`$background`	顏色	`$reveal-overlay-background`	覆蓋層的背景顏色。

@include reveal-modal-base;

加入 modal 的基本樣式。

@include reveal-modal-width($width, $max-width);

調整 modal 的寬度。

參數	類型	預設值	說明
`$width`	數字	`無`	modal 的寬度。通常為百分比。
`$max-width`	數字	`$reveal-max-width`	modal 的最大寬度。

@include reveal-modal-fullscreen;

建立全螢幕 modal，延伸至視窗的完整寬度和高度。

JavaScript 參考

初始化

JavaScript 中必須包含下列檔案才能使用此外掛程式

foundation.core.js
foundation.reveal.js
- 搭配實用程式函式庫 foundation.util.keyboard.js
- 搭配實用程式函式庫 foundation.util.touch.js
- 搭配實用程式函式庫 foundation.util.triggers.js
- 搭配實用程式函式庫 foundation.util.mediaQuery.js
- 搭配實用程式函式庫 foundation.util.motion.js

Foundation.Reveal

建立 Reveal 的新執行個體。

var elem = new Foundation.Reveal(element, options);

名稱	類型	說明
`element`	jQuery	用於 modal 的 jQuery 物件。
`options`	物件	選用參數。

外掛程式選項

使用這些選項自訂 Reveal 的執行個體。外掛程式選項可以設定為個別資料屬性、一個結合的 data-options 屬性，或傳遞至外掛程式建構函式的物件。進一步了解 JavaScript 外掛程式的初始化方式。

名稱	類型	預設值	說明
`data-animation-in`	`字串`	`''`	用於動畫元素的 Motion-UI 類別。如果沒有使用，預設為簡單顯示/隱藏。
`data-animation-out`	`字串`	`''`	用於動畫元素的 Motion-UI 類別。如果沒有使用，預設為簡單顯示/隱藏。
`data-show-delay`	`數字`	`0`	如果沒有使用動畫，按一下之後延遲開啟 modal 的時間（毫秒）。
`data-hide-delay`	`數字`	`0`	如果沒有使用動畫，按一下之後延遲關閉 modal 的時間（毫秒）。
`data-close-on-click`	`布林值`	`true`	允許按一下主體/覆蓋層關閉 modal。
`data-close-on-esc`	`布林值`	`true`	如果使用者按下 `ESCAPE` 鍵，允許模態視窗關閉。
`data-multiple-opened`	`布林值`	`false`	如果為 true，允許多個模態視窗同時顯示。
`data-v-offset`	`數字或字串`	`auto`	模態視窗應從螢幕頂端往下推的距離（以像素為單位）。
`data-h-offset`	`數字或字串`	`auto`	模態視窗應從螢幕側邊往內推的距離（以像素為單位）。
`data-full-screen`	`布林值`	`false`	允許模態視窗為全螢幕，完全遮擋其他檢視。JS 也會檢查這一點。
`data-overlay`	`布林值`	`true`	允許模態視窗產生一個覆蓋層 div，在模態視窗開啟時會覆蓋檢視。
`data-reset-on-close`	`布林值`	`false`	允許模態視窗在關閉時移除並重新注入標記。如果在不使用提供者 API 的情況下使用影片元素，則應為 true，否則影片將繼續在背景中播放。
`data-deep-link`	`布林值`	`false`	將位置雜湊連結到模態視窗。在模態視窗開啟/關閉時設定位置雜湊，並在位置變更時開啟/關閉模態視窗。
`data-update-history`		`false`	如果啟用 `deepLink`，則使用開啟的模態視窗更新瀏覽器記錄。
`data-append-to`	`字串`	`body`	允許模態視窗附加到自訂 div。
`data-additional-overlay-classes`	`字串`	`''`	允許在 Reveal 覆蓋層中新增其他類別名稱。

事件

這些事件將從附加 Reveal 外掛程式的所有元素觸發。

名稱	說明
`closeme.zf.reveal`	在模態視窗開啟前立即觸發。關閉目前開啟的其他所有模態視窗。
`open.zf.reveal`	在模態視窗成功開啟時觸發。
`closed.zf.reveal`	在模態視窗完成關閉時觸發。

方法

_disableScroll

$('#element').foundation('_disableScroll', scrollTop);

在顯示 Reveal 時停用捲動，以防止背景位移。

名稱	類型	說明
`scrollTop`	數字	捲動以視覺化套用，預設為目前視窗捲動。

_enableScroll

$('#element').foundation('_enableScroll', scrollTop);

在關閉 Reveal 時重新啟用捲動。

名稱	類型	說明
`scrollTop`	數字	捲動以還原，預設為 html「top」屬性（由 `_disableScroll` 設定）。

open

$('#element').foundation('open');

開啟由 this.$anchor 控制的模態視窗，並預設關閉所有其他模態視窗。

觸發下列事件： Reveal#event:closeme Reveal#event:open

close

$('#element').foundation('close');

關閉模態視窗。

觸發下列事件： Reveal#event:closed

toggle

$('#element').foundation('toggle');

切換模態視窗的開啟/關閉狀態。

_destroy

$('#element').foundation('_destroy');

銷毀模態視窗的執行個體。

基礎

太棒了。我懂了。

調整大小

巢狀模態視窗

太棒了！

另一個模態視窗！！！

全螢幕

進階選項

沒有遮罩

動畫

哇，我頭暈了！

AJAX

輔助功能

對話框標籤！

Sass 參考

變數

混合

reveal-overlay

reveal-modal-base

reveal-modal-width

reveal-modal-fullscreen

JavaScript 參考

初始化

Foundation.Reveal

外掛程式選項

事件

方法

_disableScroll

_enableScroll

open

close

toggle

_destroy