Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 or clicking on any other area of the screen.

like image 756
Abdul Rahman Avatar asked Apr 21 '15 06:04

Abdul Rahman


2 Answers

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');  
      } 
    }
  );
like image 129
Syed Avatar answered Sep 28 '22 20:09

Syed


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
});
like image 32
Jack L. Avatar answered Sep 28 '22 21:09

Jack L.