How to detect Materialized.js modal closing event?
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 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');
}
}
);
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:
function openModal(){
$("#modal_id").modal('open', {
dismissible: true,
complete: function() { console.log('Close modal'); }
})
}
Related videos on Youtube
![Abdul Rahman](https://i.stack.imgur.com/DnT7L.jpg?s=256&g=1)
Abdul Rahman
Web Developer having experience +9 Years. Specialty: jQuery, JavaScripts, PHP, JSP, ASP 3.0 (Classic), ASP .Net with C#, Java Programming Language, HTML, CSS.
Updated on July 05, 2022Comments
-
Abdul Rahman almost 2 years
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 or clicking on any other area of the screen.
-
Ahmad Ahmadi almost 8 yearsThis doesn't work because adding parameters at the end of function executes it immidiately and
undefined
is returned instead. -
Jack L. about 7 yearsThat's a valuable insight! And it's never too late :)
-
Abdul Rahman almost 7 yearsWell, this is very good, this functionality will be achieved in my next project in sha Allah. Thanks, @Syed.
-
Suhail Khan over 4 yearsHow to do this without jquery?
-
JAGJ jdfoxito about 4 years$("#modal_id").modal('open', { dismissible: true, complete: function() { console.log('Close modal'); } }) for close and open put dismissible en false, that for materialize
-
JAGJ jdfoxito about 4 years$("#modal_id").modal('open', { dismissible: true, complete: function() { console.log('Close modal'); } }) for close and open put dismissible en false, that for materialize