Materializecss Modal on page load未打开模态

Question

我使用 Materializecss 0.100.2，我需要在页面加载或文档准备好时打开一个模式。但不起作用，只有当我单击按钮时才会起作用，我不知道为什么。 模态具有“打开”类，但模态具有“显示：无”，并且 div 模态覆盖是隐藏的。它有效但不完全。

jQuery(document).ready(function () {
 jQuery('#modalInfo').modal();
 jQuery('#modalInfo').modal('open');
});

Answer 1

这个东西适用于 vanillaJS。您需要使用querySelector() 获取模态类，然后将其传递给M.Modal.init()，并在此instance 的帮助下调用open() 方法。

HTML -

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

JS -

document.addEventListener('DOMContentLoaded', function () {
    var Modalelem = document.querySelector('.modal');
    var instanceModal = M.Modal.init(Modalelem);
    instanceModal.open();
});