2015-04-21 7 views
6

Come rilevare l'evento di chiusura per materialized.js?Come rilevare l'evento di chiusura modale di Materialized.js?

Voglio eseguire qualche codice JavaScript quando la modal è chiusa facendo clic sul pulsante di chiusura modale o premendo il pulsante di escape o facendo clic su qualsiasi altra area dello schermo.

+0

Non conosco un framework/libreria chiamato materialized.js. Intendi questa biblioteca? http://materializecss.com/modals.html –

risposta

10

Sembra che tu significa chiudere evento per modali del quadro materializecss.

Come per la versione 0.97.1 (15 settembre 2015) Quando si apre una modale, è possibile passare le opzioni (vedere: http://materializecss.com/modals.html#options), ma si noti che si tratta di una descrizione molto approssimativa, poiché le opzioni non vengono salvate quando usando lean_modal (https://github.com/Dogfalo/materialize/issues/1464), quindi dovrebbero essere passati solo a openModal.

Per riassumere:

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

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

Forse sono troppo tardi per condividere i miei pensieri qui, ma nel caso in cui si desidera passare una variabile/argomento nella funzione espressione quando modale vicino. È possibile utilizzare questo codice

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

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

E.g. quando si desidera ripristinare i campi del modulo quando si chiude modal. Spero che questo ti sia d'aiuto. Tra l'altro, grazie alla Jack L/@ Jack L. (Non so come parlare TT)

+1

Questo non funziona perché ** l'aggiunta di parametri alla fine della funzione viene eseguita immediatamente * e invece viene restituito "undefined". –

+0

Questa è una preziosa intuizione! E non è mai troppo tardi :) –

1

E' facile ora con l'ultima versione:

http://materializecss.com/modals.html

È possibile personalizzare il comportamento di ogni modale usando queste opzioni. Ad esempio, è possibile chiamare una funzione personalizzata da eseguire quando viene chiusa una modal. Per fare ciò, basta inserire la funzione nel codice di intializzazione come mostrato di seguito.

$('.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 
    } 
); 
+0

Bene, questo è molto buono, questa funzionalità sarà raggiunta nel mio prossimo progetto in sha Allah. Grazie, @Syed. –

Problemi correlati