javascript - MaterializeCSS Modal Not Opening
问题描述
This is my HTML code for Modal:
<div 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>
And this is how I am referencing it in JS:
function aFunction() {
var elem = document.querySelector('.modal');
var instance = M.Modal.getInstance(elem);
instance.open();
}
I am calling the function on button click but the modal doesn't show up. The only change I notice is that scrollbars on the right disappear.
解决方案
您使用的是哪个版本?
这就是在v1.0.0的文档示例中的完成方式:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<!-- Modal Trigger -->
<button data-target="modal1" class="btn modal-trigger">Open the modal</button>
<button class="btn">Do something else</button>
<!-- 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.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
var singleModalElem = document.querySelector('#modal1');
var instance = M.Modal.getInstance(singleModalElem);
const modalbtn = document.querySelector('#open')
modalbtn.addEventListener('click', () => {
instance.open();
// Do other stuff
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- 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>
<button id="open">Open a single modal</button>
推荐阅读
- excel - VBA Range_Copy 宏 - 如何将相同的任务应用于后续行
- node.js - 免费 Heroku 计划和 TLS 证书
- python - 有没有办法选择一个字典,然后从那个字典中选择一个函数?
- python - 当 xpath = no such element 时停止循环
- html - 我的网站在 Firefox 和 Chrome 中看起来不同
- background-image - 将文本放置在带有 layout="responsive" 的 amp-img 中
- excel - 在 VBA 宏中执行简单的数学运算
- amazon-sqs - DeleteMessage 操作 - 无效的收据句柄
- javascript - 需要帮助将表单数据发送到电子邮件地址,使用
- java - 异常后for循环重置