在 Materializecss 中初始化 Javascript 模态如何工作？答案

【问题标题】：How Does Initalizing a Javascript Modal Work in Materializecss?在 Materializecss 中初始化 Javascript 模态如何工作？
【发布时间】：2020-11-22 00:46:27
【问题描述】：

我看到了其他答案，但我仍然不明白初始化 javascript 的含义以及我应该如何将 javascript 部分添加到我的 HTML 页面？如果我想在我的 HTML 页面中包含此模式：

 <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- 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).ready(function(){
  // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
  $('.modal').modal();
});

如果我将这个（javascript 部分）添加到 material.js 的末尾，它没有任何效果。如果我将它添加到 HTML 页面中并使用这样的包装：

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

【问题讨论】：

标签： javascript materialize

【解决方案1】：

您可以使用常规 JavaScript 来初始化它，而不是使用您正在使用的 jQuery：

M.Modal.init(document.getElementById('modal1'));

您可以将该代码放在 <script> 标记中或包含 .js 文件，但请确保在模态 <div> 和 Materialize 源代码下方这样做。

完整的代码可能如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>Modal test</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">   
    </head>
    <body>
   <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- 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>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
    <script>
         M.Modal.init(document.getElementById('modal1'));
    </script>
</html>

【讨论】：