2

ファンデーション 4 をメテオ ウェブに追加します。このパッケージを使用します

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

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…&lt;/a>

モーダルは正しく開きますが、モーダルを閉じようとするとブラウザがフリーズします。コンソールログを実行するだけのリンクなど、他のイベントをモーダルに追加してテストしましたが、これも凍結されています。モーダル内でイベントを使用できないようです...モーダルを閉じてイベントを追加する方法についてのアイデアはありますか??

どうも

4

1 に答える 1

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…&lt;/a>
</template>

このようにすると、その閉じるボタンが機能しているようです。

また、モーダルでイベントをリッスンする必要がある場合は、クライアント コードで 1 つ以上のイベント ハンドラーを指定するだけです。

// 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
  });
}
于 2013-09-28T15:14:22.670 に答える