Materialize tips - モーダルの使い方

phi phi on materialize

オレの Advent Calendar 2015 - Adventar の 6 日目です.

以前『マテリアルデザインをベースとしたフレームワーク『Materialize』使ってみた | phiary』で紹介した Materialize.

今回は, これを使ってモーダルを作る方法を紹介します.

Runstant Demo

ボタンを押すと, モーダルが表示されるのが分かるかと思います.

モーダルの作り方

ステップ形式で解説しています. それぞれ Runstan のデモもあります!!

1. Materialize のセットアップ

前回同様 cdnjs 経由で読み込みます.

<script src='https://code.jquery.com/jquery-2.1.4.js'></script>

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.css' />  
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.js'></script>  

jQuery に依存しているので忘れないように気をつけましょう♪

runstant

2. html でボタンを定義しよう

まず, モーダルを表示するためのボタンを作りましょう. 下記のように定義します.

<button data-target="modal-demo" class="btn modal-trigger">Modal</button>  

data-target はターゲットとなるモーダルの id を指定します.

runstant

3. モーダルを定義しよう

次にモーダルを定義していきます.

<div id="modal-demo" class="modal">  
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>  

モーダルは .modal というクラスを付ける必要があります. こうすることでデフォルトで非表示になります.

id  には 1 で作ったボタンの data-target と同じ内容を指定しましょう.
今回は modal-demo と指定しています.

runstant

4. JavaScript でボタンとモーダルを関連付けよう

jQuery でボタンを取得し, それに対して Materialize 側で定義されている
leanModal() を実行するだけです.

$('.modal-trigger').leanModal();

これだけで, ボタンとモーダルを関連付けることができます. 試しにボタンを押してみてください.

画面上にモーダルが表示されるのが分かるかと思います.

runstant

画面下部にくっついたオシャレなモーダルを作ろう

先ほど作ったモーダルに .bottom-sheet クラスを追加するだけです. たったこれだけで, 画面下部にくっついたオシャレなモーダルを作ることが出来ます.

私の作った runstant の設定やシェア画面でも多用させてもらっています.

runstant

モーダルを JavaScript でオープンしたりクローズしたり

できます.

オープンには openModal(モーダルID), クローズには closeModal(モーダルID) を使います.

デモを作ったので良かったら見てみてください. 1秒後にモーダルが開いて, 4秒後にモーダルが閉じるのが分かるかと思います.

runstant

指定可能なオプション

下記のオプションをサポートしています.

// ボタンとモーダルを関連付ける
$('.modal-trigger').leanModal({
  dismissible: true,  // 画面外のタッチによってモーダルを閉じるかどうか
  opacity: 0.5,       // 背景の透明度
  in_duration: 300,   // インアニメーションの時間
  out_duration: 200,  // アウトアニメーションの時間
  // 開くときのコールバック
  ready: function() {
    console.log('ready');
  },
  // 閉じる時のコールバック
  complete: function() {
    console.log('closed');
  }
});

実際に指定している例です.

runstant

Reference