Javascript

Foundationで用意されているJavascriptの説明。

モーダルウィンドウ Reveal Modal

Foundationで用意されているモーダルウィンドウ Reveal Modalの使い方の説明
Liteboxのようなページ遷移せずにウィンドウを表示する機能です。

モーダルウィンドウの設置

まずは、下記のボタンをクリックしてデモを見てみてください。

クリックするとモーダルウィンドウが開きます。

Modal タイトル

Modal リード文

Modal 内容

×
      <!-- モーダルウィンドウを呼び出すボタン -->
      <a href="#" data-reveal-id="myModal" class="button">クリックするとモーダルウィンドウが開きます。</a>

      <!-- モーダルウィンドウの中身 -->
      <div id="myModal" class="reveal-modal" data-reveal>
        <h2>Modal タイトル</h2>
        <p class="lead">Modal リード文</p>
        <p>Modal 内容</p>
        <a class="close-reveal-modal">&#215;</a>
      </div>

上記は公式サイトのサンプルをベースに簡略化したデータになります。

ソースを簡単に説明していきます。
2行目はモーダルウィンドウを呼び出すボタンになります。
リンクにデータ属性のdata-reveal-id="任意のID"を指定。

      <!-- モーダルウィンドウを呼び出すボタン -->
      <a href="#" data-reveal-id="myModal" class="button">クリックするとモーダルウィンドウが開きます。</a>

5行目からはモーダルウィンドウの中身の設置になります。
こちらの例では、内容と閉じるボタンが入っています。
5行目はボタンに付けた任意のIDを指定し紐づけます。
また、クラスの.reveal-modalとデータ属性のdata-revealを指定します。

      <!-- モーダルウィンドウの中身 -->
      <div id="myModal" class="reveal-modal" data-reveal>

6~8行目は内容の設定です。特に指定はないので中身はご自由に。

      <h2>Modal タイトル</h2>
      <p class="lead">Modal リード文</p>
      <p>Modal 内容</p>

9行目はモーダルウインドウの右上の閉じるボタンの設定です。
リンクに.close-reveal-modalを指定することで閉じるボタンに。
&#215;は×表示の指定なので、こちらを変更することで×以外の閉じるボタンになります。

      <a class="close-reveal-modal">&#215;</a>

モーダルウィンドウのカスタマイズ

モーダルウィンドウのサイズ

モーダルウィンドウの表示幅はデフォルトでは80%ですが、決められたクラスを指定することで表示幅を変更できます。
.tinyで30%、.smallで40%、.mediumで60%、.largeで70%、.xlargeで95%、.fullで100%の6種類です。
指定箇所は.reveal-modalと一緒の場所で指定になります。
※スマホサイズでは全て横幅100%になります。

下記にそれぞれ指定した物を用意したので違いを確認してみてください。

指定なし .tiny指定 .small指定 .medium指定 .large指定 .xlarge指定 .full指定

Modal タイトル

Modal リード文

Modal 内容

×

Modal タイトル

Modal リード文

Modal 内容

×

Modal タイトル

Modal リード文

Modal 内容

×

Modal タイトル

Modal リード文

Modal 内容

×

Modal タイトル

Modal リード文

Modal 内容

×

Modal タイトル

Modal リード文

Modal 内容

×
      <div id="myModal" class="reveal-modal medium" data-reveal>
© 2015 foudation5-guide.com