Materialise Modal 没有打开答案

【问题标题】：Materialize Modal is not opening upMaterialise Modal 没有打开
【发布时间】：2022-04-19 11:24:31
【问题描述】：

这是我在文件中使用的物化模态之一：

<li class="logged-in">
   <a href="#" class="grey-text modal-trigger" data-target="modal-signup">SignUp</a>
</li>


 <div id="modal-signup" class="modal">
        <div class="modal-content col s4 m6 l12">
            <h4>SignUp</h4><br>
            <form id="signup-form">
                <div class="input-field">
                    <input type="email" id="signup-email" required>
                    <label for="signup-email">Email Address</label>
                </div>
                <div class="input-field">
                    <input type="password" id="signup-password" required>
                    <label for="signup-password">Choose Password</label>
                </div>
                <button class="btn yellow darken-2 z-depth-0">SignUp</button>
            </form>
        </div>
    </div>

初始化模态的JS代码：

document.addEventListener('DOMContentLoaded',function(){
    var modals=document.querySelectorAll('.modal');
    console.log(modals)
    M.Modal.init(modals);         
})

但点击后，它并没有打开...

【问题讨论】：

标签： html css modal-dialog materialize simplemodal

【解决方案1】：

我已经尝试过了，它可以工作（模式已打开）。我认为这是因为您先生没有包含 Materialize CDN，更多信息请参见 https://materializecss.com/getting-started.html。

你可以试试这个，也许有帮助

document.addEventListener("DOMContentLoaded", function () {
  var modals = document.querySelectorAll(".modal");
  console.log(modals);
  M.Modal.init(modals);
});

<head>
  <!-- Materialize Version 1.0.0 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
</head>

<body>
    <li class="logged-in">
      <a href="#" class="grey-text modal-trigger" data-target="modal-signup">SignUp</a>
    </li>

    <div id="modal-signup" class="modal">
      <!-- Your Modal HTML code -->
    </div>

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    
    <!-- Compiled and minified JavaScript -->
    <script src="/main.js"></script>
  </body>

【讨论】：