Question

我不明白为什么模态不起作用：

<a class="modal-trigger" href="#modal1"><i class="material-icons icn_profile waves-effect">person</i>
</a>
 <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>

我尝试了许多解决方案，比如将模式div放在标题部分之外，并改变jquery脚本，如：

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

等等.. 我无法在堆栈溢出时达到解决方案。我还在body部分末尾的materialize.js之前加载了jquery库。 js控制台没有显示任何错误。感谢

Answer 1

您为HTML带来的脚本序列可能会出错。

注意：由于我不知道你的css和js文件的相对路径，我自己给了它们。确保给他们正确的路径。确保它们正确加载到您的DOM。

查看以下内容是否适合您。

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

请按照订单操作。 Jquery必须在materialize.js之前出现。否则你的代码似乎工作正常。

如果错误仍然存在，请告诉我。

，我想补充一下以下代码：

{{1}}

一旦页面打开，

将打开模态。你真的想要这种行为吗？我上面发布的代码工作正常;当您点击人物图标时，模式会打开。这通常是预期的行为。但另外，如果你想在页面加载后立即打开模态，那也可以正常工作。

希望这会有所帮助。感谢。

Answer 2

我一直努力直到得到它。我不知道这是否是您想要的，但是它对我有用：

我在标题中有这个

declare let $: any;

之后

     openit(){
      $('#modal1').modal('open');
}

和我的html

    <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" data-target="modal1" (click)="openit()">Modal</a>

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

Answer 3

尝试将其添加到您的.js文件中：

//Modal trigger
document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.modal');
  var instances = M.Modal.init(elems);
});

物化模式没有出现

3 个答案: