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