Question

我认为我对如何从Materialise Modal包中触发模态感到困惑。 Materialize Modal我已经加载了包装，我想使用其中一种预烘焙模式。

JS：

MaterializeModal.form({
title: "Enter some Data!",
bodyTemplate: "my-form",
callback: function(error, response) {
  if (response.submit) {
    // Iterate over form results & display.
    for (var field in response.form) {
    Materialize.toast(field + ": " + response.form[field], 5000, "green");
  }
  } else {
    Materialize.toast("Cancelled by user!", 5000, "red");
  }
}
});

MaterializeModal.display({
  bodyTemplate: "my-form"
});

模板：

<template name="my-form">
  <div class="row">
    <div class="input-field col s6">
      <input id="first_name" type="text" name="first-name" class="validate">
      <label for="first_name">First Name</label>
    </div>
    <div class="input-field col s6">
      <input id="last_name" type="text" name="last-name" class="validate">
      <label for="last_name">Last Name</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input disabled id="disabled" type="text" name="disabled-input" class="validate">
      <label for="disabled">Disabled</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input id="password" type="password" name="password" class="validate">
      <label for="password">Password</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input id="email" type="email" name="email" class="validate">
      <label for="email">Email</label>
    </div>
  </div>
</template>

如果我有一个按钮，请说：

 <button id="client-search" class="someClass">Search</button>

如何通过按钮点击触发模态？为愚蠢的问题道歉。

Answer 1

根据文档：在按钮数据目标中指定模态ID，将类模态触发器添加到按钮并注册触发器。请参阅http://materializecss.com/modals.html

上的文档

HTML

<button id="client-search" class="modal-trigger">Search</button>

的JavaScript

Template.my-form.onRendered({
  $('.modal-trigger').leanModal();
});

虽然有一些警告：模态和下拉列表在最新版本的物化弹药上不起作用，因为Meteor使用了一个疯狂的旧的过时版本的jQuery（似乎不可能在没有分支和重新打包的情况下更改Meteor的jquery版本你自己的Meteor发行版）和Materialize依赖于更新的jquery功能。我通过使用旧版本的Materialise来解决这个问题，特别是诗意的：materialize-scss@1.97.1（SASS版本的Materialise）。

在Meteor中物化模态如何触发模态

1 个答案: