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模式事件未触发

1 个答案: