web-dev-qa-db-ja.com

Materialized.jsモーダル終了イベントを検出するにはどうすればよいですか？

materialized.jsの終了イベントを検出する方法

モーダルの閉じるボタンをクリックするか、エスケープボタンを押すか、画面の他の領域をクリックしてモーダルが閉じられたときに、JavaScriptコードを実行したいのですが。

javascriptjqueryeventsmodal-dialogmaterialized
12
Abdul Rahman

materializecssフレームワークのmodalのイベントを閉じることを意味しているように見えます。

0.97.1バージョン（2015年9月15日）については、モーダルを開くときにオプションを渡すことができます（次を参照してください http://materializecss.com/modals.html#options ）。ただし、 lean_modal（ https://github.com/Dogfalo/materialize/issues/1464 ）を使用するとオプションが保存されないため、これは非常にわかりにくい説明であるため、 openModalにのみ渡されます。

総括する：

var onModalHide = function() {
    alert("Modal closed!");
};

$("#id-of-your-modal").openModal({
    complete : onModalHide
});
10
Jack L.

最新バージョンがあれば簡単です。

http://materializecss.com/modals.html

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

  $('.modal').modal({
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
        alert("Ready");
        console.log(modal, trigger);
      },
      complete: function() { alert('Closed'); } // Callback for Modal close
    }
  );

編集：元々は長い間答えていましたが、最近 @ JackRogers 確認しました。コードが機能する場合は、コードを使用してください:)テストするための作業設定がありません。

$('.modal').modal({
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      onOpenEnd: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
        alert("Ready");
        console.log(modal, trigger);
      },
      onCloseEnd: function() { // Callback for Modal close
        alert('Closed');  
      } 
    }
  );
9
Syed

多分私はここで私の考えを共有するには遅すぎますが、モーダルが閉じるときに関数式で変数/引数を渡したい場合に備えて。このコードを使用できます

var onModalHide = function(param1) {
    alert("Modal closed!");
};

$("#id-of-your-modal").openModal({
    complete : onModalHide('your_parameter')
});

例えば。モーダルを閉じるときにフォームのフィールドをリセットする場合。これがお役に立てば幸いです。ちなみに、 Jack L /@ Jack Lに感謝します（T.Tの言い方はわかりません）

1
S. Domeng

私の場合、モーダルを開いてopenイベントを検出するには、complete paramが必要でした。例：

function openModal(){     
   $("#modal_id").modal('open', {
      dismissible: true,
      complete: function() { console.log('Close modal'); }
   })
}
1
Juan Antonio