0

また、ポップアップとポップアップを呼び出したページの間でデータを送信するにはどうすればよいですか? zurb Foundationのポップアップ「reveal」内でユーザー登録用のajaxフォームを作成したいと思います。可能だと思いますか？

4

2 に答える 2

6

この回答は少し遅れているかもしれませんが、明らかにポップアップにフォームを入れることは絶対にできます. たとえば、ログイン ボタンをクリックしたときにログイン ダイアログを表示する場合は、次のようにします。

HTML の下部 (すべての行の後) で、ポップアップのコンテンツを作成します。

<div id="login-modal" class="reveal-modal" style="width: 400px; background: black; color: white;">
    <h2>Login</h2>
    <form id="login-form" class="six">
        <div class="row">
            <label for="username">Username</label>
            <input type="text" name="username" />
            <label for="password">Password</label>
            <input type="password" name="password" />
        </div>
        <div class="row">
             <div class="right" style="margin-top: 20px;">
                 <button type="reset" class="button radius alert">Reset</button>
                 <button type="submit" class="button radius">Login</button>
             </div>
         </div>
     </form>
     <a class="close-reveal-modal">&#215;</a>
</div>

次に、いずれかの方法を使用して表示できます。新しい Foundation 3.0 では、次のように非常に簡単に表示できます。

<a href="#" 
   data-reveal-id="login-modal" 
   data-animation="fadeAndPop" 
   data-animationspeed="300" 
   data-closeonbackgroundclick="true" 
   data-dismissmodalclass="close-reveal-modal">Login</a>

それが役立つことを願っています!

于 2012-07-12T18:09:22.197 に答える
1

これを app.js で試してください。次に、任意のアンカーで明らかにクラスを使用します

  $('a.reveal').click(function(event) {
      event.preventDefault();
      var $div = $('<div>').addClass('reveal-modal').appendTo('body'),
        $this = $(this);
        $div.empty().html('<p align="center"><img src="application/public/loading.gif" /></p>').append('<a class="close-reveal-modal">&#215;</a>').reveal();

          $.get($this.attr('href'), function(data) {
            return $div.empty().html(data).append('<a class="close-reveal-modal">&#215;</a>').reveal();
          });
    });
于 2012-11-18T18:40:53.173 に答える