Невозможно изменить имя класса для модалов в Materialise CSS - PullRequest
Новая
       8

Невозможно изменить имя класса для модалов в Materialise CSS

0 голосов
/ 19 октября 2018

Я наткнулся на очень странную проблему с Materialise CSS.Кажется, невозможно изменить имя класса модалов.Не стесняйтесь проверить сами: 

$( 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, и проблема все еще остается.

1 Ответ

0 голосов
/ 19 октября 2018

Вы можете сделать это следующим образом 

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