Question

我试图在MaterialiseCss中放置一个模态，但它不会触发这是我的代码。

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

当您有一个名为$('.modal1')

的班级时，您也在使用.modal

这是一个工作代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Materialisecss中的模态没有响应

1 个答案: