MaterializeCSS 模态事件未触发

Question

我试图在模式打开时执行一些操作，但它根本不会触发事件。

  $('.modal').modal({
   onOpenStart: function(){
    console.log("it works!");
   }
  });

Answer 1

HTML

<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>


<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
    </div>
</div>

尝试在 jQuery 中调用这样的函数。

$(document).ready(function () {
    $('.modal').modal({
        onOpenStart() {
            console.log("Open Start");
        },
        onOpenEnd() {
            console.log("Open End");
        },
        onCloseStart(){
            console.log("Close Start");
        },
        onCloseEnd(){
            console.log("Close End");
        },
    });
});

或者如果你想在 vanillaJS 中做，那么你可以这样调用它们

document.addEventListener('DOMContentLoaded', function () {
    const optionsModal = {
            onOpenStart: () => {
                console.log("Open Start");
            },
            onOpenEnd: () => {
                console.log("Open End");
            },
            onCloseStart: () => {
                console.log("Close Start");
            },
            onCloseEnd: () => {
                console.log("Close End");
            }
        }
    var Modalelem = document.querySelector('.modal');
    var instanceModal = M.Modal.init(Modalelem, optionsModal);
});

MaterializeCSS 模态事件未触发

MaterializeCSS modal events not firing

javascript

jquery

materialize