How to detect Materialized.js modal closing event?

Maybe I'm too late to share my thoughts here but in case you want to pass a variable/argument in your function expression when modal close. You may use this code

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

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

E.g. when you want to reset the fields of your form when modal close. Hope this will help. By the way, thanks to Jack L/@Jack L. (i dunno how to mention T.T)


Looks like you mean closing event for modal of the materializecss framework.

As for 0.97.1 version (15th of September, 2015) When opening a modal, you can pass options (see: http://materializecss.com/modals.html#options), but note, that it's a very delusive description, as the options are not being saved when using lean_modal (https://github.com/Dogfalo/materialize/issues/1464), so they should be passed only to openModal.

To sum up:

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

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

You can also get it after modal is Loaded by getting instance and update options like this :

const modal = M.Modal.getInstance(document.getElementById('your-modal-id'))
modal.options.onCloseEnd = () => {
   alert('closed')
}

It' easy now with the latest version:

http://materializecss.com/modals.html

You can customize the behavior of each modal using these options. For example, you can call a custom function to run when a modal is dismissed. To do this, just place your function in the intialization code as shown below.

  $('.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
    }
  );

EDIT: Originally I have answered it long time back but recently @JackRogers reviewed and here is the code please use it if it works :) I have no work setup to test it.

$('.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');  
      } 
    }
  );