12

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

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

4

4 回答 4

11

Looks like you mean closing event for modal of the materializecss framework.

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.

To sum up:

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

$("#id-of-your-modal").openModal({
    complete : onModalHide
});
于 2015-09-15T11:14:16.580 回答
10

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

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');  
      } 
    }
  );
于 2017-06-27T08:25:58.340 回答
1

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

function openModal(){     
   $("#modal_id").modal('open', {
      dismissible: true,
      complete: function() { console.log('Close modal'); }
   })
}
于 2019-09-24T12:22:38.533 回答
1

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

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

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

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

于 2016-07-29T00:53:32.067 回答