javascript - 物化模型不起作用

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() 允许单击在 anchor 上正常运行。

$('#modal1').modal()

您将获得显示 onclick 的模式 - (尝试调试准备就绪)

--- 更新 ---
在 Codepen 上，有一个奇怪的延迟:我通过使用

在 $(document).ready 中让它工作

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

(这不是一个优雅的解决方案，但它似乎有效)；

CODEPEN