How To Detect Materialized.js Modal Closing Event?

How to detect the closing event for materialized.js? I want to run some JavaScript code when the modal got closed either by clicking on modal close button or pressing escape button

Solution 1:

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
});

Solution 2:

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 modalready: 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 modalonOpenEnd: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.alert("Ready");
        console.log(modal, trigger);
      },
      onCloseEnd: function() { // Callback for Modal closealert('Closed');  
      } 
    }
  );

Solution 3:

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)

Solution 4:

In my case the open param was required to open the modal and detect complete event, example:

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