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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29764242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 03:56:20  来源:igfitidea点击:

How to detect Materialized.js modal closing event?

javascriptjqueryeventsmodal-dialogmaterialized

提问by Abdul Rahman

How to detect the closing event for materialized.js?

如何检测关闭事件materialized.js

I want to run some JavaScript code when the modal got closed either by clicking on modal close button or pressing escape button or clicking on any other area of the screen.

我想在模态关闭时运行一些 JavaScript 代码,方法是单击模态关闭按钮或按下退出按钮或单击屏幕的任何其他区域。

采纳答案by Hyman L.

Looks like you mean closing event for modalof the materializecssframework.

看起来像你的意思是关闭事件模式中的materializecss框架。

As for 0.97.1 version (15th of September, 2015) When opening a modal, you can pass options (see: 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), so they should be passed only to openModal.

至于 0.97.1 版本(2015 年 9 月 15 日)打开模态时,您可以传递选项(请参阅:http: //materializecss.com/modals.html#options),但请注意,这是一个非常令人迷惑的描述,由于选项在使用lean_modal( https://github.com/Dogfalo/materialize/issues/1464)时没有被保存,所以它们应该只传递给 openModal。

To sum up:

总结:

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

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

回答by Syed

It' easy now with the latest version:

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

http://materializecss.com/modals.html

http://materializecss.com/modals.html

You can customize the behavior of each modal using these options. For example, you can call a custom function to run when a modal is dismissed. To do this, just place your function in the intialization code as shown below.

您可以使用这些选项自定义每个模态的行为。例如,您可以调用自定义函数以在关闭模态时运行。为此,只需将您的函数放在初始化代码中,如下所示。

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

EDIT: Originally I have answered it long time back but recently @HymanRogersreviewed and here is the code please use it if it works :) I have no work setup to test it.

编辑:最初我已经回答了很长时间,但最近@HymanRogers进行了,这里是代码,如果有效,请使用它:) 我没有工作设置来测试它。

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

回答by Juan Antonio

In my case the openparam was required to open the modal and detect completeevent, example:

在我的情况下,open需要 param 来打开模态并检测complete事件,例如:

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

回答by S. Domeng

Maybe I'm too late to share my thoughts here but in case you want to pass a variable/argument in your function expressionwhen modal close. You may use this code

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

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

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

E.g. when you want to reset the fields of your form when modal close. Hope this will help. By the way, thanks to Hyman L/@Hyman L. (i dunno how to mention T.T)

例如,当您想在模式关闭时重置表单的字段时。希望这会有所帮助。顺便说一句,感谢Hyman L/@Hyman L.(我不知道怎么提到 TT)