Question

即使遵循了实现文档中提到的步骤，也不会出现实现模态。在控制台中，$（...）modal不是函数错误。

我试图重新排列脚本的下载顺序，但是似乎都没有作用

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

应该显示模式但不显示

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

物化模态未打开

1 个答案: