0

私はウェブサイトを作成していて、サイトの1ページ（.php）に2つのリンクがあります。最初の読み取りレジスタと次の読み取りログイン。jqueryを使用してポップアップを作成していますが、どのフォームがポップアップするかは、クリックしたリンクによって異なります。（私はこれを行おうとしていますが、できません）。合計2つのファイル（logReg.php）と（popup.css）があります。

ログインをクリックすると、期待どおりにログインフォームがポップアップしますが、登録をクリックしても何もポップアップしません。そして、これらを逆にすると、レジスタのjqueryコードを最初に配置すると、レジスタボックスがポップアップしますが、ログインはポップアップしません。click()関数のjqueryAPIを読みましたが、すべてを正しく実行しているように見えますが、明らかにそうではありません。どんな助けでも大歓迎です。ところで、このコードは100％私のものではありません。単一のポップアップウィンドウで見つけたコードを変更しました。

logReg.phpの内容

<html>
     <head>
          <!-- Typical stuff here. link to the popup.css & jquery.js -->
          <title>MyPage</title>
          <script type="text/javascript">
               $(document).ready(function () {
                    $("a.login-window").click(function () {

                         //Getting the variable's value from a link
                         var loginBox = $(this).attr("href");

                         //fade in the popup
                         $(loginBox).fadeIn(300);

                         //set the center alignment padding
                         var popMargTop = ($(loginBox).height() + 24) / 2;
                         var popMargLeft = ($(loginBox).width() + 24) / 2;

                         $(loginBox).css({
                              'margin-top' : -popMargTop,
                              'margin-left' : -popMargLeft
                         });

                         //Add the mask to body
                         $('body').append('<div id="mask"></div>');
                         $('mask').fadeIn(300);
                         return false;
                    });

                    //When clicking on the button close the pop closed
                    $('a.close, #mask').live('click', function() {
                         $('#mask, .login-popup').fadeOut(300, function() {
                              $('#mask').remove();
                         });
                         return false;
                    });

                    $("a.register-window").click(function () {

                         //Getting the variable's value from a link
                         var registerBox = $(this).attr("href");

                         //fade in the popup
                         $(registerBox).fadeIn(300);

                         //set the center alignment padding
                         var popMargTop = ($(registerBox).height() + 24) / 2;
                         var popMargLeft = ($(registerBox).width() + 24) / 2;

                         $(registerBox).css({
                              'margin-top' : -popMargTop,
                              'margin-left' : -popMargLeft
                         });

                         //Add the mask to body
                         $('body').append('<div id="mask"></div>');
                         $('mask').fadeIn(300);
                         return false;
                    });

                    //When clicking on the button close the pop closed
                    $('a.close, #mask').live('click', function() {
                         $('#mask, .register-popup').fadeOut(300, function() {
                              $('#mask').remove();
                         });
                         return false;
                    });
               });
          </script>
     </head>
     <body>
          <div id="links>
               <a href="#login-box" class="login-window">Login</a>
               <a href="#register-box" class="register-window">Register</a>
          </div>
          <div id="login-box" class="login-popup">
               <form method="post" class="signin" action="">
                    <!-- All form stuff here -->
               </form>
          </div>
          <div id="#register-box" class="register-popup">
               <form method="post" class="signin" action="">
                    <!-- All form stuff here -->
               </form>
          </div>
     </body>
</html>
4

2 に答える 2

1

まず、この行に二重引用符がありません。

<div id="links>

への変更

<div id="links">

これでリンクが修正されるはずです。

次に、mikakun が jquery をアップグレードして使用することについて言ったことを実行する必要があります.on。

于 2013-01-22T23:56:56.403 に答える
1

  • 最初に .live を使用せず、jquery をアップグレードして使用する

    $(document.body).on({event:function(){},...},"selector"

  • 2番目は追加を使用せず、使用します

    $('<div../>').appendTo($(document.body));

（あなたのバグは2番目から来ると思います）

また、オープン ボックス コードのプラグインを作成し、.on を使用して 2 つを一度にバインドすることもできます。

于 2013-01-22T23:52:06.443 に答える