如何检测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

您可以使用这些选项自定义每个模式的行为。例如，当模式被取消时，您可以调用自定义函数来运行。要做到这一点，只需将您的函数放在intialization代码中，如下所示。

  $('.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');  
      } 
    }
  );

Answer 3

通过获取实例和更新选项，您还可以在加载模式之后获得它，如：

const modal = M.Modal.getInstance(document.getElementById('your-modal-id'))
modal.options.onCloseEnd = () => {
   alert('closed')
}