Meteorjs Foundation modals 事件冻结浏览器答案

【问题标题】：Meteorjs Foundation modals events freezes the browserMeteorjs Foundation modals 事件冻结浏览器
【发布时间】：2013-09-28 13:14:09
【问题描述】：

我将基础 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>

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

谢谢

【问题讨论】：

标签： javascript meteor modal-dialog zurb-foundation

【解决方案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
  });
}

【讨论】：

警告词，如果您的“.reveal-modal”没有直接插入到标签下，那么 Foundation 将在显示之前 make a copy 元素，这意味着 Meteor 事件不会不要被它束缚。因此，请确保将模态元素定义为标签的第一个子元素以避免出现问题。