MaterialiseCSS Модальный не открывается - PullRequest
Новая
       6

MaterialiseCSS Модальный не открывается

0 голосов
/ 01 декабря 2018

Это мой HTML-код для модальных: 

<div class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

И вот как я ссылаюсь на него в JS: 

function aFunction() {
    var elem = document.querySelector('.modal');
    var instance = M.Modal.getInstance(elem);
    instance.open();
}

Я вызываю функцию по нажатию кнопки, номодальный не появляется.Единственное изменение, которое я заметил, это то, что полосы прокрутки справа исчезают.

1 Ответ

0 голосов
/ 01 декабря 2018

Какую версию вы используете?

Вот как это делается в примере документы для v1.0.0: 

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.modal');
  var instances = M.Modal.init(elems);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<!-- Modal Trigger -->
<button data-target="modal1" class="btn modal-trigger">Open the modal</button>

<button class="btn">Do something else</button>

<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

Или, если вы хотите открыть его программно (через ваши собственные функции), вам нужно сначала запустить модал. 

document.addEventListener('DOMContentLoaded', function() {

  var elems = document.querySelectorAll('.modal');
  var instances = M.Modal.init(elems);
  
  var singleModalElem = document.querySelector('#modal1');
  var instance = M.Modal.getInstance(singleModalElem);
  const modalbtn = document.querySelector('#open')
  modalbtn.addEventListener('click', () => {
    instance.open();
    // Do other stuff
  })
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

<button id="open">Open a single modal</button>
...