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

这可能发生了，因为按钮和div具有相同的ID＆＃34; addNote＆＃34;。尝试更改按钮的ID，然后更改jQuery脚本。

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

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

Answer 2

能够使用以下代码修复

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

Answer 3

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

使用materialize 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 5

这已经是一个古老的问题，并且已经找到解决方案（尽管没有可接受的答案？），但是现在正在使用它。我认为一些澄清会有所帮助。

那是您的整个代码吗？如果不是，请检查是否首先启动了 .modal 。

persons

在后续步骤中描述细节时，您已省略了该部分。

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

Answer 6

如果按照关于物化css的指南进行操作，我遇到了一段时间的错误，只是发现这是导入顺序，所以必须在导入materialize.js之前先导入jQuery！

单击时不打开模态（materialize，jquery）

6 个答案: