Unable to change class name for Modals in Materialize CSS

Question

I've stumbled upon a very strange issue with Materialize CSS. It seems it's not possible to change the class name of Modals. Feel free to check for yourself:

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

Even if you remove the modal that uses the default classname modal, the one with modal1 will not work.

Does anyone know a solution to this? I'm asking, because I have multiple modals on my page and some require different Modal options than the other. As far as I know, this can only be done by initializing them seperately.

PS: I've also tried this without jQuery and the issue still remains.

Answer 1

You can do it like this

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

Also note that i've changed the href in

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

It's now the href="#modal" that tell's what modal that should appear when we press the button

Demo

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