物化模型不起作用

Question

我正在查看materializecss的文檔。但模態似乎不起作用。我只是用那是在文檔http://materializecss.com/modals.html

的Html

<!-- Modal Trigger --> 
    <a class="waves-effect waves-light btn" 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> 

JS

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

我已經把一支鋼筆以及

Codepen link

Answer 1

按照文檔 - 初始化.modal()允許在單擊該錨正常工作。

$('#modal1').modal() 

你會得到的模態到的onclick顯示 - （嘗試調試對準備）

---更新---
上Codepen，有一個奇怪的延遲： 我得到了它通過使用

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

在$(document).ready工作（這不是一個完美的解決方案，但它似乎工作）;

CODEPEN

Answer 2

使用的代碼用於使用jQuery顯示元素的。

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

OR上點擊

<a class="waves-effect waves-light btn">Modal</a> 

$('.btn').on('click', function(){ 
    $('.modal').show(); 
});