MaterializeCSS模态事件未触发 [英] MaterializeCSS modal events not firing

问题描述

我正在尝试在模式打开时执行一些操作，但根本不会触发该事件.

Im trying to execute some stuff while the modal is opening but it wont fire the event at all.

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

推荐答案

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中调用这样的函数.

Try calling functions like this in 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中使用，则可以这样称呼他们

Or if you want to do in vanillaJS then you can call them like this

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模态事件未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！