How to detect Materialized.js material closing event?

Question

How to define a closing event for materialized.js ?

I want to run some JavaScript code when the modal closes either by pressing the modal close button, or by pressing the escape button, or by pressing any other area of ​​the screen.

Answer 1

Looks like you mean a close event for the materializecss modal frame.

As for version 0.97.1 (September 15, 2015), when you open a modal option, you can pass parameters (see http://materializecss.com/modals.html#options ), but note that this is a very attractive description, since parameters are not saved when using lean_modal ( https://github.com/Dogfalo/materialize/issues/1464 ), so they should only be passed to openModal.

Summarizing:

 var onModalHide = function() { alert("Modal closed!"); }; $("#id-of-your-modal").openModal({ complete : onModalHide }); 

Answer 2

Now easy with the latest version:

http://materializecss.com/modals.html

You can customize the behavior of each modal using these parameters. For example, you can call a custom function that will be run when the modal is rejected. To do this, simply put your function in the initialization 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 } ); 

UPDATE: I originally answered it a long time ago, but recently @JackRogers reviewed it, and here is the code, please use it if it works :) I do not have working settings for testing 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'); } } ); 

Answer 3

Maybe I'm too late to share my thoughts here, but if you want to pass a variable / argument in a function expression, when is it modally close. You can use this code

 var onModalHide = function(param1) { alert("Modal closed!"); }; $("#id-of-your-modal").openModal({ complete : onModalHide('your_parameter') }); 

eg. when you want to reset the fields of your form when modally closed. Hope this helps. By the way, thanks Jack L / @ Jack L. (I don't know how to mention TT)

Answer 4

In my case, the open parameter was needed to open modal mode and detect the complete event, for example:

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