我不明白为什么模式不起作用:
<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');
});
还有更多.. 我无法在堆栈溢出问题上找到解决方案。我还在正文部分末尾的materialize.js 之前加载了jquery 库。 js控制台没有显示任何错误。 谢谢
最佳答案
您引入 HTML 的脚本顺序可能有错误。
注意:由于我不知道你的css和js文件的相对路径，所以我自己给了它们。确保为他们提供正确的路径。确保它们正确加载到您的 DOM 中。
看看以下内容是否适合您。
<html>
<head>
<link rel="stylesheet" href="css/materialize.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<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>
<script type="text/javascript" src="jquery.js"></script>
<script src="materialize.min.js"></script>
<script>
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
</script>
</body>
请遵守顺序。 Jquery 必须出现在 Materialize.js 之前。否则你的代码似乎可以正常工作。
如果错误仍然存在，请告诉我。
另外，我想添加以下代码:
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('#modal1').modal('open');
});
页面打开后将立即打开模式。你真的想要这种行为吗？我上面发布的代码工作正常；当您点击人物图标时，模式将打开。这就是通常所期望的预期行为。但除此之外，如果您希望模式在页面加载后立即打开，那也可以正常工作。
希望这有帮助。谢谢。
关于javascript - 物化模式未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45662211/