web-dev-qa-db-fra.com

Comment détecter un événement de clôture modale Materialized.js?

Comment détecter l'événement de clôture pour materialized.js?

Je souhaite exécuter du code JavaScript lorsque le modal a été fermé, soit en cliquant sur le bouton de fermeture du modal ou en appuyant sur le bouton d'échappement, soit en cliquant sur une autre zone de l'écran.

javascriptjqueryeventsmodal-dialogmaterialized
9
Abdul Rahman

On dirait que vous voulez dire événement de clôture pour modal du materializecss framework.

Pour la version 0.97.1 (15 septembre 2015) Lors de l’ouverture d’un modal, vous pouvez passer des options (voir: http://materializecss.com/modals.html#options ), mais notez que c’est un description très trompeuse, car les options ne sont pas sauvegardées lors de l’utilisation de lean_modal ( https://github.com/Dogfalo/materialize/issues/1464 ), elles ne doivent donc être transmises qu’à openModal.

Pour résumer:

var onModalHide = function() {
    alert("Modal closed!");
};

$("#id-of-your-modal").openModal({
    complete : onModalHide
});
10
Jack L.

C'est facile maintenant avec la dernière version:

http://materializecss.com/modals.html

Vous pouvez personnaliser le comportement de chaque modal à l'aide de ces options. Par exemple, vous pouvez appeler une fonction personnalisée à exécuter lorsqu'un modal est congédié. Pour ce faire, il suffit de placer votre fonction dans le code d’initialisation comme indiqué ci-dessous.

  $('.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: A l'origine, j'y répondais il y a longtemps, mais récemment @JackRogers commenté et voici le code, utilisez-le s'il vous plaît :) Je n'ai pas de configuration de travail pour le tester.

$('.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');  
      } 
    }
  );
6
Syed

Peut-être que je suis trop tard pour partager mes pensées ici, mais au cas où vous voudriez passer une variable/argument dans votre expression de fonction à la fermeture modale. Vous pouvez utiliser ce code

var onModalHide = function(param1) {
    alert("Modal closed!");
};

$("#id-of-your-modal").openModal({
    complete : onModalHide('your_parameter')
});

Par exemple. lorsque vous souhaitez réinitialiser les champs de votre formulaire à la fermeture modale. J'espère que cela aidera. Au fait, merci à Jack L / @ Jack L. (je ne sais pas comment mentionner T.T)

1
S. Domeng