0

我正在创建一个网站，在该网站的一个页面上（它是 .php）我有两个链接。第一个读取寄存器，下一个读取登录。我正在使用 jquery 创建一个弹出窗口，弹出的表单取决于单击的链接。（我正在尝试这样做但无法做到）。我总共有 2 个文件（logReg.php）和（popup.css）。

当我点击登录时，登录表单会按预期弹出，但是当我点击注册时，什么也没有弹出。如果我颠倒这些，如果我先把jquery代码注册然后......注册框弹出但登录没有。我已经阅读了click()函数的 jquery API，但在我看来我做的一切都是正确的，但显然不是。任何帮助将不胜感激。顺便说一句，这段代码不是 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

  • 首先不要使用.live，升级jquery并使用

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

  • 第二不要使用附加，使用

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

（我相信你的错误来自第二个）

你也可以为你的开箱代码制作一个插件，然后使用.on一次绑定两者

于 2013-01-22T23:52:06.443 回答
1

对于初学者，您在此行缺少双引号：

<div id="links>

改成

<div id="links">

那应该可以修复您的链接。

然后你应该按照 mikakun 所说的升级 jquery 和使用.on，因为最好保持最新状态。

于 2013-01-22T23:56:56.403 回答