物化模态未打开答案

【问题标题】：Materialize Modal Not Opening物化模态未打开
【发布时间】：2019-05-29 17:03:24
【问题描述】：

即使在我按照物化文档中提到的步骤进行操作后，物化模式也没有出现。在控制台中，出现 $(...) modal is not a function 错误。

我尝试重新排列脚本下载序列，但它们似乎都不起作用

<!DOCTYPE html>
<html>

<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
  rel="stylesheet">


<!-- Compiled and minified CSS -->
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com
/ajax/libs/materialize/1.0.0/css/materialize. 
min.css">

<!-- Compiled and minified JavaScript -->


<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</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>


<!--JavaScript at end of body for optimized loading-->
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js
/materialize.min.js"></script>

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256- 
DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous">
</script>

</body>


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

</html>

模态应该显示但没有显示

【问题讨论】：

jQuery 脚本标签应该在物化的脚本标签之上

标签： javascript jquery html materialize

【解决方案1】：

这是工作演示，

需要在materialize.js之前导入jquery

$(document).ready(function () {
    $('.modal').modal();
});

<!DOCTYPE html>
<html>

<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
  rel="stylesheet">

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


<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256- 
DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous">
</script>

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js
/materialize.min.js"></script>

<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>



</body>

</html>

【讨论】：