MaterializeCss modal Error openModal n'est pas une fonction

J'ai toutes les exigences Jquery, Materialize.js assis au-dessus de mon fichier Js mais je reçois l'avertissement openModal n'est pas une fonction … J'ai vérifié que le nom modal est correct et je peux exécuter Materialize.toast, donc je sais que Materialize.js fonctionne. Le déclenchement avec le bouton n'appelle pas le mode non. Voici le code …

Scripts:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="/js/materialize.js"></script> <script type="text/javascript" src="/js/video.js"></script> <script src="/js/admin.js"></script>

Gâchette:

 <button data-target="modal1" class="btn modal-trigger">Modal</button>

Modal:

  <!-- Modal Structure --> <div id="modal1" class="modal"> <div class="modal-content"> <h4>Modal Header</h4> <p>A bunch of text</p> </div> <div class="modal-footer"> <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a> </div> </div> </div>

Js:

  var modal = document.getElementById('modal1'); modal.openModal(); $('#modal1').leanModal(); $('#modal1').openModal();

Les fonctionnalités de matérialisation nécessitent des éléments Jquery.
GetElementById () – Nous donne l'objet DOM.

 //You can either convert this Dom object to Jquery var modal = document.getElementById('modal1'); var jquerymodal = $(modal); //convert to jQuery Element jquerymodal.openModal(); //Or just use Jquery Element like $('#modal1').openModal();

Ok j'ai eu le même problème et je l'ai corrigé en changeant l'appel pour ouvrir le mode et l'initialisation.

Si vous avez eu le même problème que moi, consultez la documentation la plus récente ici

Cela peut être nouveau – openModal () n'est pas utilisé ici.

Initialisation:

 <script> try { try { $('#modalId').modal(); } catch (e) { console.info('loading modal auto-initialized..'); } } </script>

J'ai ajouté l'essai / capture parce que parfois cela n'est pas nécessaire

La mise en oeuvre:

 $('#modalID').modal('open');

Importez le fichier minifié dans le document matérialiser / dist au lieu de matérialiser / js.

Exécuter avec: $ ('# elementId'). Modal (); $ ('# ElementId'). Modal ('show');

De cette façon, cela a fonctionné.

MODIFIER:

En fait, cela n'a pas fonctionné dans l'environnement de production.

J'ai donc fait ceci:

 (function( $ ) { $.fn.showModal = function() { var self = this; try { this.modal(); self.modal('open'); } catch (err) { try{ self.openModal(); } catch (err2) { console.error("Something went wrong - cannot open modal."); } } } $.fn.hideModal = function() { var self = this; try { this.modal(); self.modal('close'); } catch (err) { try{ self.closeModal(); } catch (err2) { console.error("Something went wrong - cannot close modal."); } } } }( jQuery ));

Utilisez seulement: $ ('# modal'). ShowModal ()