モーダルは、現在のページの最上部に表示されるダイアログボックス/ポップアップウィンドウです。
クリックしてモーダルを開くモーダルを作成するには、ユニークな ID (<div id="myModal" など) を持つコンテナ要素に、
.reveal-modal クラスと data-reveal 属性を追加します。
モーダルを開くには、data-reveal-id="id" 属性を持つ要素を使用します。
id は、コンテナの id (例えば "myModal") に一致しなければなりません。
モーダルは、モーダルウィンドウの外側をクリックすると閉じます。また、閉じるために、（右上隅に要素を配置される）
モーダル内部の <a> 要素に .close-reveal-modal クラスを追加することもできます。
注: 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">×</a>
</div>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
結果：
Try it Yourself »モーダルコンテナに、以下のクラスのいずれかを追加することで、モーダルのサイズを変更します：
.tiny: 30% 幅.small: 40% 幅.medium: 60% 幅.large: 70% 幅.xlarge: 95% 幅.full: 100% 幅と高さ注: タブレット、ラップトップやデスクトップのデフォルトは、幅が 80％ で、小型デバイスでは、 常に 100％ の全幅です。
<div id="myModal" class="reveal-modal tiny|small|medium|large|xlarge|full" data-reveal>
結果：
Try it Yourself »最初のモーダル内に、新しく"トリガーボタン" を追加することにより、モーダル内にモーダルを配置することができます。 トリガーボタンと新しいモーダルの双方が、一致する新しい 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">×</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">×</a>
</div>
結果：
button below will open a new modal. If you open the new modal, foundation will close this modal (the first) and slide the new one into place over the first modal.
×Easy peasy! Out with the old and in with the new!
Foundation slides the second modal into place after the first modal.
×2番目のモーダルは、最初のモーダルを置き換えます。2番目のを開いたときに、最初のモーダルを閉じたくない場合は、
2番目のモーダルに data-options="multiple_opened:true;" 属性を追加します：
<div id="secondModal" class="reveal-modal" data-reveal data-options="multiple_opened:true;">
結果：
Open the second modal with the button below. This time, the first modal will NOT close (stays in the background of the second modal).
×See the difference? The second modal lays on top of the first modal. If you close this modal, you'll see the first modal again.
×