Question

我偶然发现了Materialise CSS的一个非常奇怪的问题。似乎无法更改Modals的类名称。随时检查一下自己：

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">This Modal works</a>

<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>This Modal works</h4>
    <p>It works because it uses the defaul classname 'modal'</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal2">This Modal doesn't</a>

<!-- Modal Structure -->
<div id="modal2" class="modal1">
  <div class="modal-content">
    <h4>This Modal does not work</h4>
    <p>It doesn't work because it uses a different classname</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

即使您删除了使用默认类名modal的模式，使用modal1的模式也不起作用。

有人知道解决方案吗？我问是因为我的页面上有多个模态，有些模态需要与其他模态选项不同的模态。据我所知，这只能通过分别初始化它们来完成。

PS：我也尝试了不使用jQuery的情况，但问题仍然存在。

Answer 1

您可以这样做

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

还请注意，我已更改

中的href

<a class="waves-effect waves-light btn modal-trigger" href="#modal">This Modal works</a>
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">This Modal doesn't</a>

现在是href="#modal"，它说明我们按下按钮时应显示的模式

演示

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal">This Modal works</a>

<!-- Modal Structure -->
<div id="modal" class="modal">
  <div class="modal-content">
    <h4>This Modal works</h4>
    <p>It works because it uses the defaul classname 'modal'</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">This Modal doesn't</a>

<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>This Modal does not work</h4>
    <p>It doesn't work because it uses a different classname</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

无法在Materialize CSS中更改Modals的类名称

1 个答案: