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

问题描述 投票:9回答:3

如何检测为materialized.js结束活动?

我想运行一些JavaScript代码,当模式得到了通过点击模式的关闭按钮或按退出键或点击屏幕上的任何其他领域要么关闭。

javascript jquery events modal-dialog materialized
3个回答
10
投票

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

至于0.97.1版本(九月15日,2015年),当打开一个模式,你可以通过选项(参见: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
});

7
投票

这与最新版本现在很容易:

http://materializecss.com/modals.html

您可以自定义使用这些选项每个模态的行为。例如,你可以调用自定义函数时,一个模式被驳回运行。要做到这一点,只需将你的函数在intialization代码如下所示。

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

1
投票

也许我来不及在这里分享我的想法,但如果你想传递一个变量/参数在你的函数表达式时模式接近。您可以使用此代码

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

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

例如。当你想重置表单时态密切的领域。希望这会有所帮助。顺便说一句,感谢Jack L / @杰克·L。(我不知道怎么说T.T)

© www.soinside.com 2019 - 2024. All rights reserved.