如何检测Materialized.js模态关闭事件？

Question

如何检测 materialized.js 的关闭事件？

我想运行一些JavaScript代码，当模态通过点击模态关闭按钮或按退出按钮或点击屏幕的任何其他区域关闭时。

Answer 1

看起来你的意思是 modal 的 materializecss 框架的关闭事件。

至于0.97.1版本（2015年9月15日）打开模态时，可以传递选项（参见：http://materializecss.com/modals.html#options), but note, that it's a very delusive description, as the options are not being saved when using 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

也许我来不及在这里分享我的想法，但如果您想在模式关闭时在 函数表达式 中传递 variable/argument。您可以使用此代码

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

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

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

Answer 3

现在使用最新版本很容易：

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 4

在我的例子中，需要 open 参数来打开模式并检测 complete 事件，示例：

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

Answer 5

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

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

如何检测Materialized.js模态关闭事件？

How to detect Materialized.js modal closing event?

javascript

jquery

events

materialized

modal-dialog