javascript - Materializecss中的模态不响应

我正在尝试在MaterializeCss中放置一个模式，但不会触发
这是我的代码。

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

最佳答案

根据Materialize CSS docs，如果您使用的是最新版本，则需要使用

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

看到不同？代替leanModal()使用modal()

当您有一个名为$('.modal1')的类时，您也在使用.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>