web-dev-qa-db-fra.com

Materialise modal ne fonctionne pas

J'ai écrit un code simple pour matérialiser le modal.
Code HTML: 

<a class="waves-effect waves-light btn view" data-target="modal1">View Scores</a>
<!-- 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>

Code JS: 

$(document).ready(function() {
  // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
  /*$('.view').click(function (){
    $('#modal1').modal('open'); 
    alert('edskjcxnm');
  });*/
  /*$('.view').leanModal();*/
  $('#modal1').modal('open');
});

Lien JSFiddle: https://jsfiddle.net/7f6hmgcf/
Pourquoi ça ne marche pas?

javascriptjquerymaterialize
12
Ajay Kulkarni

Initialisez d'abord tous les modaux. $('.modal').modal();

Le code complet ressemblera à ceci

(function ($) {
    $(function () {

        //initialize all modals           
        $('.modal').modal();

        //now you can open modal from code
        $('#modal1').modal('open');

        //or by click on trigger
        $('.trigger-modal').modal();

    }); // end of document ready
})(jQuery); // end of jQuery name space
28
Alexey

Je ne suis pas sûr à 100% de ce que vous demandez ici, mais si ce que vous demandez est de savoir comment déclencher le modal au clic sur le bouton, vous pouvez simplement le faire en définissant un onclick comme celui-ci:

<a class="waves-effect waves-light btn view" onclick="$('#modal1').modal('open');">View Scores</a>

Mais avant de pouvoir faire $ ('# modal1'). Modal ('open'); vous devez lancer le modal dans votre js, comme ceci:

$(document).ready(function() {
    $('#modal1').modal();
});

Vous pouvez consulter ma solution dans ce violon: https://jsfiddle.net/AndreasMolle/7f6hmgcf/13/

Une autre solution pourrait être de procéder de cette façon:

<a class="waves-effect waves-light btn view" href="#modal1">View Scores</a>
4
Andreas Moldskred

La documentation Materializecss n'est pas trop claire, j'ai également eu un peu de mal, voici comment j'ai résolu mon problème.

  <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn  modal-trigger" href="#modal1">Modal</a>

   <!-- 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>

 <script>
 $(document).ready(function(){
 // the "href" attribute of .modal-trigger must specify the modal ID that   wants to be triggered
 $('.modal-trigger').leanModal();
 });
  </script>
2
Alfred Alfizo Mosima

J'ai récemment mis à jour mon projet vers materializecss 0.98.0 et avec cette version j'ai besoin d'initialiser les modaux avant de l'ouvrir.

//Old
$('#modal1').openModal();

//New
$('#modal1').modal().modal('open');

Je ne trouve aucune configuration comme "autoOpen" sur les options initiales modales :(.

1
Barceyken
$( document ).ready(function() {
  $('.modal').modal();
  $('#modal1').on('click', function() {
  });
});

https://jsfiddle.net/juands/z512cb7f/3/ vérifier ce lien

1
Juan Diego Silva

Essayez la classe Materialize.Modal

let modal=new Materialize.Modal($("#yourModal"));

modal.open(); //Open it on some event

modal.close(); //This is not needed as you can close it with the modal buttons. It's tricky
0
MrViK