如何检测Materialized.js模态结束事件？

Question

如何检测结束事件materialized.js？

我想在模式关闭时运行一些JavaScript代码,方法是单击模态关闭按钮或按退出按钮或单击屏幕的任何其他区域.

Answer 1

看起来你的意思是关闭materializecss框架模态的事件.

至于0.97.1版本(2015年9月15日)当打开模态时,您可以传递选项(请参阅:http://materializecss.com/modals.html#options),但请注意,这是一个非常虚幻的描述,因为使用时没有保存选项lean_modal(https://github.com/Dogfalo/materialize/issues/1464),所以它们只应传递给openModal.

总结一下:

var onModalHide = function() {
    alert("Modal closed!");
};

$("#id-of-your-modal").openModal({
    complete : onModalHide
});

Answer 2

现在使用最新版本很简单:

http://materializecss.com/modals.html

您可以使用这些选项自定义每个模态的行为.例如,您可以调用自定义函数以在模式被关闭时运行.为此,只需将函数放在初始化代码中,如下所示.

  $('.modal').modal({
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
        alert("Ready");
        console.log(modal, trigger);
      },
      complete: function() { alert('Closed'); } // Callback for Modal close
    }
  );

编辑:最初我已回答它很久以来但最近@JackRogers审查,这里是代码请使用它,如果它工作:)我没有工作设置来测试它.

$('.modal').modal({
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      onOpenEnd: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
        alert("Ready");
        console.log(modal, trigger);
      },
      onCloseEnd: function() { // Callback for Modal close
        alert('Closed');  
      } 
    }
  );