モーダル - Materialize

ダイアログボックス、確認メッセージ、または呼び出すことができるその他のコンテンツには、モーダルを使用します。モーダルを機能させるには、トリガーのリンクにモーダルIDを追加する必要があります。閉じるボタンを追加するには、ボタンに.modal-closeクラスを追加するだけです。


  <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" 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-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

ボタンを使用してモーダルを開く場合は、href属性ではなくdata-targetにモーダルIDを指定します。


  <!-- Modal Trigger -->
  <button data-target="modal1" class="btn modal-trigger">Modal</button>

トリガーを使用してモーダルを開くには


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.modal').modal();
  });

これらのオプションを使用して、各モーダルの動作をカスタマイズできます。たとえば、モーダルが閉じられたときに実行されるカスタム関数を呼び出すことができます。これを行うには、以下に示すように、初期化コードに関数を配置するだけです。

名前	タイプ	デフォルト	説明
不透明度	数値	0.5	モーダルオーバーレイの不透明度。
inDuration	数値	250	ミリ秒単位のトランジションイン時間。
outDuration	数値	250	ミリ秒単位のトランジションアウト時間。
onOpenStart	関数	null	モーダルが開かれる前に呼び出されるコールバック関数。
onOpenEnd	関数	null	モーダルが開かれた後に呼び出されるコールバック関数。
onCloseStart	関数	null	モーダルが閉じられる前に呼び出されるコールバック関数。
onCloseEnd	関数	null	モーダルが閉じられた後に呼び出されるコールバック関数。
preventScrolling	真偽値	true	モーダルが開いている間、ページのスクロールを防ぎます。
dismissible	真偽値	true	キーボードまたはオーバーレイのクリックによってモーダルを閉じることができるようにします。
startingTop	文字列	'4%'	開始時のトップオフセット
endingTop	文字列	'10%'	終了時のトップオフセット

jQueryはもはや依存関係ではないため、すべてのメソッドはプラグインインスタンスで呼び出されます。プラグインインスタンスは次のように取得できます
  var instance = M.Modal.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.modal').modal('methodName');
    $('.modal').modal('methodName', paramName);
  */
        

.open();

モーダルを開く


instance.open();

.close();

モーダルを閉じる


instance.close();

.destroy();

プラグインインスタンスを破棄してティアダウンする


instance.destroy();

名前	タイプ	説明
el	要素	プラグインが初期化されたDOM要素。
options	オブジェクト	インスタンスが初期化されたオプション。
isOpen	真偽値	モーダルが開いている場合。
id	文字列	モーダル要素のID

非常に長いコンテンツがあり、アクションボタンを常に表示したい場合は、モーダルにmodal-fixed-footerクラスを追加できます。


  <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

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

ボトムシートモーダルは、画面の下部にユーザーにアクションを表示するのに適しています。それらは通常のモーダルと同じように動作します。


  <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

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