Question

我将基础4添加到我的流星网。我用这个包

https://atmosphere.meteor.com/package/foundation

我按照基础主页Foundation 4

上的步骤操作

<div id="myModal" class="reveal-modal">
  <h2>Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
  <a class="close-reveal-modal">&#215;</a>
</div>

我添加链接

<a href="#" data-reveal-id="myModal" class="open radius button">Example Modal…</a>

模态正确打开，但当我尝试关闭模式时，浏览器被冻结。我测试过将其他事件添加到模态中，比如只是执行控制台日志的链接，并且也被冻结。看起来我不能在模态中使用事件...关于如何关闭模态并向其添加事件的任何想法？

THX

Answer 1

您是否尝试将模态放入模板中？

<head>
  <title>foundation</title>
</head>

<body>
  {{> foundation}}
</body>

<template name="foundation">
  <h1>Hello World!</h1>

    <div id="myModal" class="reveal-modal">
        <h2>Awesome. I have it.</h2>
        <p class="lead">Your couch.  It is mine.</p>
        <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
        <a class="close-reveal-modal">&#215;</a>
    </div>

    <a href="#" data-reveal-id="myModal" class="open radius button">Example Modal…</a>
</template>

这样关闭按钮似乎对我有用。

如果你需要在模态上监听事件，你可以在客户端代码中指定一个或多个事件处理程序：

// foundation.js - foundation is the name of my meteor project
// so this is the default file added to my project
if (Meteor.isClient) {

  Template.foundation.events({
    "click h2": function(e) {
      console.log("modal h2 clicked");
    }
  });

  Template.foundation.rendered = function() {
    // you can bind custom events here if you need to
  }
}


if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

Meteorjs Foundation模态事件会冻结浏览器

1 个答案: