重新打开时清空Fancybox v2登录对话框

时间:2015-04-11 06:08:22

标签: javascript jquery html5 login fancybox

感谢Stack Overflow,这个网站和服务。这是我的问题。我会尽量让它变得清晰。

我正在使用Alessio Atzeni的Brushed Template工作。它有自己定制的一组插件:jQuery,Fancybox v2 ......很多CSS。我需要我的网站有一个登录功能,我能够做到这一点。除了这个非常烦人的问题之外,它几乎完美无缺。

所以,我在网站上,然后点击“登录”。出现了一个fancybox,其中包含我想要的所有内容...输入用户名,密码和自定义提交按钮。错误陷阱到位并且运行良好。问题是:如果我使用角落处的X关闭登录框,然后再次单击“登录”,则重新打开的Fancybox为空。

这是我的Fancybox内容的HTML:

<div style="display:none">
<form id="login_form" method="post" action="">
   <div id="login_error">
      <p><strong>Login</strong></p>
      <p>
         <label for="login_name"><em>Username:</em></label>
         <input type="text" id="login_name" name="login_name" size="30" />
         <label for="login_pass"><em>Password:</em></label>
         <input type="password" id="login_pass" name="login_pass" size="30" />
         <input type="submit" id="login-submit" value="Login" />
      </p>
   </div>
 </form>
</div>

这是我的jQuery Fancybox v2代码:

$('.fixhref a').on('click',function(){   <-This is a fix to a problem with the template
    $("#login").fancybox({
        href        : "#login_form",
        scrolling   : 'no',
        titleShow   : false,
        afterClose  : function(){
            $("#login_error").hide();
        }
    });
});

我的HTML的这一部分启动了Fancybox:

<nav id="menu">
   <ul id="menu-nav">
      <li class="current"><a href="#home-slider">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#work">Portfolio</a></li>
      <li><a href="#about">About</a></li>
      <li class="fixhref"><a id="login" href="#">Login</a></li>
   </ul>
</nav>

我有一种感觉我需要将所有登录对话框的内容放入变量中,然后每次启动Fancybox时都会显示。但问题是,我不是很精通Javascript或如何有效地在JS和HTML之间传递数据。这就是我的问题。

任何帮助都会非常感激,或者至少是朝着正确的方向推进。

1 个答案:

答案 0 :(得分:1)

因为您将整个登录表单放入HTML代码#login_error div中,并在afterClose函数中隐藏了#login_error div,所以当您重新打开Fancybox时,内容将被隐藏。< / p>

相关问题