Question

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

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

Answer 1

您的意思是关闭 materializecss 框架的模态的事件。

关于0.97.1版本（2015年9月15日）打开模态时，您可以传递选项（请参阅：http://materializecss.com/modals.html#options），但请注意，这是一个非常虚幻的描述，因为选项不是在使用wrap_content（https://github.com/Dogfalo/materialize/issues/1464）时保存，因此它们只应传递给openModal。

总结一下：

lean_modal

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

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

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

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

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

Answer 4

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

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

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

4 个答案: