Модал не открывается при клике (материализация, jquery)

Question

Я играю с приложением-диспетчером заметок, созданным с помощью meteor / materialize / jquery.

У меня проблемы с тем, что мой модал не выскакивает, как при нажатии кнопки.

Вот код для моего модала:

<template name="add">
 <div id="addNote" class="modal">
  <div class="modal-content">
   <h3>Add Note</h3>
   <form class="add-form">
    <input type="text" name="text" placeholder="Add note...">
   </form>
  </div>
 </div>
</template>

Это кнопка, которая при нажатии должна открыть модал.

<li class="nav-item">
 <button id="addNote" class="waves-effect waves-light btn" href="#addNote">Add Note</button>
</li>

У меня также есть этот jquery-код, который, по-видимому, инициализирует модал.

<script>
 $(document).ready(function(){
 $('.modal').modal();
});
</script>

Когда я нажимаю на кнопку, модал не появляется, как я полагаю, должен.

Когда я добавляю эту одну строку кода, модал открывается по умолчанию после перезагрузки страницы.

<script>
 $(document).ready(function(){
  $('.modal').modal();
  $('#addNote').modal('open');
});
</script>

Поэтому я бы подумал, что делая что-то вроде

<script>
  $('#addNote').click(function() {
   $('#addNote').modal('open');
});
</script>

или делая

<button onclick="myFunction()"></button>

Однако ни один из них не работает должным образом, и модальное окно не открывается. Кто-нибудь знает, что я здесь не так делаю?

Answer 1

Это уже старый вопрос и с найденным решением (несмотря на отсутствие принятого ответа?), Но я играл с этим прямо сейчас. Я думаю, что некоторые разъяснения помогут.

Это был весь ваш код? Если нет, проверьте строку, если сначала был инициирован .modal .

$('.modal').modal();

Вы пропустили эту часть при описании деталей в ваших дальнейших шагах.

<script>
  $(document).ready(function(){
    $('.modal').modal();
    $('#addNote').click(function() {
      $('.modal').modal('open');
    });
  });
</script> 

Answer 2

открытие модели с использованием материализации css

Я думаю, что вы должны указать модальный триггер на кнопке триггера, как показано ниже. просто попробуйте.

HTML

<li class="nav-item">
 <button type="button" id="addNote" class="waves-effect waves-light btn modal-trigger" href="#addNote">Add Note</button>
</li>

JS

<script type="text/javascript">
    $(function(){
      //the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
      $(".modal").modal();
    });
</script>

Answer 3

удалось исправить с помощью следующего кода

<li class="nav-item">
 <button name="addNoteButton" class="waves-effect waves-light btn" href="#addNote" onclick="$('#addNote').modal('open');">Add Note</button>
</li>

Answer 4

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> 
<div class="row section">
  <div class="col">
    <!-- Modal Trigger -->
    <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
    <p>You have to include jQuery and Materialize JS + CSS for the modal to work. You can include it from <a href="http://materializecss.com/getting-started.html">CDN (getting started)</a>.
  </div>
</div>
<!-- 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-action modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

Answer 5

Вероятно, это происходит потому, что у кнопки и элемента div одинаковые идентификаторы addNote. Попробуйте изменить идентификатор кнопки, а затем сценарий jQuery.

<button id="addNoteButton" class="waves-effect waves-light btn" 
href="#addNote">Add Note</button>

<script>
 $('#addNoteButton').click(function() {
   $('#addNote').modal('open');
  });
</script>