如何检测实例化.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');  
      } 
    }
  );

Answer 3

您也可以在 moder 加载后通过获取实例和更新选项来获取它，如下所示：

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

Answer 4

也许我在这里分享我的想法为时已晚，但如果您想在模态关闭时在函数表达式中传递变量/参数。您可以使用此代码

var onModalHide = function(param1) {
    alert("Modal closed!");
};
$("#id-of-your-modal").openModal({
    complete : onModalHide('your_parameter')
});

例如，当您想在模态关闭时重置表单的字段时。希望这会有所帮助。顺便说一句，感谢 Jack L/@Jack L.（我不知道如何提及 T.T）

Answer 5

在我的情况下，需要open参数来打开模态并检测complete事件，例如：

function openModal(){     
   $("#modal_id").modal('open', {
      dismissible: true,
      complete: function() { console.log('Close modal'); }
   })
}