如何检测 MaterializeCSS 模式关闭？

【问题标题】：How to detect for a MaterializeCSS modal closing?如何检测 MaterializeCSS 模式关闭？
【发布时间】：2021-03-14 09:16:19
【问题描述】：

我的网站上有多个 Materialize CSS 模态框，每个模态框都有不同的搜索栏。我希望网站检测模式何时关闭，以便我可以重置搜索栏的值。我知道如何重置该值，但无法检测到模式关闭。最简单的 JS/jQuery 方法是什么？

附：有很多代码是相互关联的，所以我没有在这里附上它，我认为这不是真的必要，因为这是一个普遍的问题，而不仅仅是特定的模态。

【问题讨论】：

标签： javascript html jquery modal-dialog materialize

【解决方案1】：

超级简单：

 document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems,{
      onCloseEnd: function() {
        console.log('Modal closed');
      },
      onOpenEnd: function(){
         console.log('Modal Open');
      }
    });
  });

初始化modal时，可以传递options（作为对象{}），M提供了一堆有用的hook。如果您需要检测特定的模态，您可以使用this检查 id 或任何其他数据：

onOpenEnd: function(){
       console.log(this.id+' Modal Open');
}

Codepen

Docs.

【讨论】：