Modale in Materialisecss reagiert nicht

Question

Ich versuche, ein Modal in MaterializeCss zu setzen, aber es löst nicht aus Das ist mein Code.

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

<div id="modal1" class="modal"><div class="modal-content"> 

<h4>Modal Header</h4> 
<p>A bunch of text</p> 
</div> 
</div> <script>$(document).ready(function(){$('.modal1').leanModal(); 
});</script> 

Answer 1

Nach Materialize CSS docs, wenn Sie die neueste Version verwenden, müssen Sie

$(document).ready(function(){ 
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 
    $('.modal').modal(); 
}); 

sehen Sie den Unterschied benutzen? statt leanModal() Verwendung modal()

auch sind Sie $('.modal1') verwenden, wenn Sie eine Klasse mit dem Namen .modal

Hier ist ein

Snippet Arbeits

$(document).ready(function(){ 
 
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 
 
    $('.modal').modal(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script> 
 
<a class="waves-effect waves-light btn" href="#modal1">Modal</a> 
 
<div id="modal1" class="modal"> 
 
    <div class="modal-content"> 
 
    <h4>Modal Header</h4> 
 
    <p>A bunch of text</p> 
 
    </div> 
 
</div>