財団モーダルボックス
モーダルボックスは、ページヘッダポップに表示されます。
私たちは、コンテナ要素上（のようなことができる<div id="myModal"固有のIDを使用しています）、および追加.reveal-modalクラスとdata-revealモーダルボックスを追加する属性を。 我々は、任意の要素で使用できるdata-reveal-id=" id " "属性アリオープンモーダルボックス。 ID idはコンテナと一致していなければならない（例は「myModal」です）。
あなたは、モーダルモーダルボックスを閉じるにはボックスの外側の領域をクリックします。 あなたは、ボタンのモーダルボックスを閉じることができ<a>ラベルを追加.close-reveal-modalクラス。
注：スライダはJavaScriptが必要です。 だから、oundationのJSを初期化する必要があります。
例
<ボタンタイプ= "ボタン"クラス = "ボタン"のデータを明らか-ID = "myModal">開くモーダル</ button>のためにクリック
<！ -モーダルコンテンツ- >
<DIVのID = "myModal"クラス = "明らかにする峰「データ明らかにする>
<H2>モーダルで見出し。< / H2>
<P>モーダルの一部のテキスト 。</ P>
<P>モーダルの一部のテキスト 。</ P>
<Aクラス= "close-reveal -modal"> ＆回; </ A>
</ DIV>
<！ -初期財団JS - >
<スクリプト>
$（ドキュメント）.ready（関数（）{
$（ドキュメント）.foundation（）;
}）
</スクリプト>
»をお試しください
モーダルボックスサイズ
あなたはモーダルボックスのサイズを設定するには、モーダルボックスコンテナに次のクラスを追加することができます。
-
.tiny：30％幅 -
.small：40％幅 -
.medium：60％幅 -
.large：70％幅 -
.xlarge：95％幅 -
.full：100％の幅と高さ
注：タブレット、ノートブック、PCコンピュータ上のデフォルトは、小さな画面上の幅の80％が100％の幅です。
組み込みモーダルボックス
あなたがモーダルボックス内のモーダルボックスを埋め込むことができ、あなたが最初にモーダルボックスに新しいトリガボタンを追加することができます。 あなたは、組み込みモーダルボックスの一意のIDを設定する必要があります。
例
<AのHREF = "#"クラス = "button" data-reveal-id = "myModal">オープンモーダル</ A>へ]をクリックします
<！ -まずモーダル- >
<DIVのID = "myModal"クラス = "明らかにする峰「データ明らかにする>
<H2>まずモーダル</ H2 >
<P>一部のテキスト.. </ P>
<P> <aのHREF = "#" data-reveal-id = "secondModal"クラス= "button">オープン第モーダル</ A> </ P>
<Aクラス= "close-reveal -modal"> ＆回; </ A>
</ DIV>
<！ -第二モーダル- >
<DIVのID = "secondModal"クラス = "明らかにする峰「データ明らかにする>
<H2>多田！セカンドモーダル< / H2>
<P>一部のテキスト.. </ P>
<Aクラス= "close-reveal -modal"> ＆回; </ A>
</ DIV>
»をお試しください
第モーダルボックスは、最初のモーダルボックスを交換します。 あなたが最初のモーダルボックスを閉じずに第二のモーダルボックスを開く場合。 あなたは第二のモーダルボックスに追加することができdata-options="multiple_opened:true;" ;"プロパティを：