物化模型不起作用

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 上，有一个奇怪的延迟： 我通过使用在$(document).ready 得到它的工作

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

（这不是一个优雅的解决方案，但似乎可行）；

CODEPEN

Answer 2

使用.show() 用jQuery 显示元素。

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

或点击

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

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