Question

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

当我点击登录时，登录表单会按预期弹出，但是当我点击注册时，没有弹出任何内容。如果我反过来说，如果我先将jquery代码放入寄存器然后......注册框会弹出，但登录不会。我已经阅读了click()函数的jquery API，但在我看来，我做的一切都是正确的，但显然不是。任何帮助将不胜感激。 BTW这段代码不是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>

Answer 1

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

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

第二个不使用追加，使用

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

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

你也可以制作一个打开的盒子代码的插件，然后使用.on

一次绑定两个

Answer 2

首先，你错过了这一行的双引号：

<div id="links>

更改为

<div id="links">

应该修复你的链接。

然后你应该做mikakun关于升级jquery和使用.on的说法，因为最好保持最新状态。

需要jquery模态弹出指导。我究竟做错了什么？

2 个答案: