【问题标题】:Materializecss Modal on page load not open the modalMaterializecss Modal on page load未打开模态
【发布时间】:2018-11-16 11:38:21
【问题描述】:

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

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

【问题讨论】:

    标签: modal-dialog materialize


    【解决方案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();
    });
    

    【讨论】:

    • 不工作,我有这个错误:materialize.min.js?ver=4.9.8:6 Uncaught TypeError: e.each is not a function
    • 你从哪里得到e.each
    • 使用最新版本的 Materialize @user3309614
    猜你喜欢
    • 1970-01-01
    • 2018-09-03
    • 2017-02-21
    • 2021-10-22
    • 1970-01-01
    • 2021-07-06
    • 1970-01-01
    • 2021-08-22
    • 2016-12-02
    相关资源
    最近更新 更多