javascript - Materializecss 中的模态没有响应

Question

我正在尝试在 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> 

Answer 1

根据 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()

当你有一个名为 .modal 的类时，你也在使用 $('.modal1')

这是一个工作片段

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