Materializecssのモーダルが応答しません

Question

MaterializeCssにモーダルを入れようとしていますが、トリガーしません。 これは私のコードです。 Materialize CSS docsによると

<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

、あなたは最新バージョンを使用している場合、あなたは

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

は違いを見る使用する必要がありますか？代わりにleanModal()使用modal()

のも、あなたは正しくインポートしたあなたはここで.modal

をという名前のクラスを持っているとき、作業抜粋です

$(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>