我不明白为什么模态不起作用:
<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');
});
等等.. 我无法在堆栈溢出时达到解决方案。我还在body部分末尾的materialize.js之前加载了jquery库。 js控制台没有显示任何错误。 感谢
答案 0 :(得分:1)
您为HTML带来的脚本序列可能会出错。
注意:由于我不知道你的css和js文件的相对路径,我自己给了它们。确保给他们正确的路径。确保它们正确加载到您的DOM。
查看以下内容是否适合您。
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('#modal1').modal('open');
});
请按照订单操作。 Jquery必须在materialize.js之前出现。否则你的代码似乎工作正常。
如果错误仍然存在,请告诉我。
,我想补充一下以下代码:
{{1}}一旦页面打开,
将打开模态。你真的想要这种行为吗?我上面发布的代码工作正常;当您点击人物图标时,模式会打开。这通常是预期的行为。但另外,如果你想在页面加载后立即打开模态,那也可以正常工作。
希望这会有所帮助。感谢。
答案 1 :(得分:1)
我一直努力直到得到它。我不知道这是否是您想要的,但是它对我有用:
我在标题中有这个
declare let $: any;
之后
openit(){
$('#modal1').modal('open');
}
和我的html
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" data-target="modal1" (click)="openit()">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal"materialize="modal" >
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
答案 2 :(得分:0)
尝试将其添加到您的.js文件中:
//Modal trigger
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});