Question

您好我正在使用colorbox和jquery表单（http://colorpowered.com/colorbox/）我只是坚持下一步做什么。我正在尝试使用jquery颜色框来取消隐藏DIV以在颜色框中显示密码框。我拿出了一些相关的脚本来使代码更具可读性并增加我获得帮助的机会。

这是我使用的标题中的javascript：

<script type="text/javascript">
$(document).ready(function(){
$('#password_reset').ajaxForm({
success: showResponse,
clearForm: 'true'
});

function showResponse(responseText, statusText)  {
  $('#password_reset').hide();
 $('#formStatus').html(responseText);
           };

 $().bind('cbox_open', function(){
 $('#password_reset').show();
$('#formStatus').html('');
});

$(".inline").colorbox({width:"300px", height:"250px", inline:true,
href:"#password_change"});
});

</script>

这是我应该运行我的javascript代码的链接（上图）并取消隐藏下面的div并将其运行到colorbox中：

<a href="javascript:showResponse">Password Reset</a>

这是我隐藏的div：

<div style="visibility: hidden;">
<div id='password_change' style="padding:10px; background:#fff;">
<strong>Change your password</strong><br /><br />
<form id="password_reset" action="password_reset.php" method="post">
<input type="hidden" name="Method" value="updatePassword"  />
Password: <br />
<input type="password" name="password1" />
<br />
<br />
Verify Password: <br />
<input type="password" name="password2" />
<br />
<input type="submit" value="Update" />
</form>
<div id="formStatus"></div>
</div>
</div>

</body>
</html>

希望有人可以告诉我如何能像我一样工作完全陷入困境。

Answer 1

修改后的脚本为：

<script type="text/javascript">
  $(document).ready(function(){
    $('#password_reset').ajaxForm({
      target:  '#formStatus',
      success: showResponse,
      clearForm: 'true'          
    });

    $(".inline").colorbox({
      width:"300px",
      height:"250px",
      inline:true,
      href:"#password_change"
    });

  });

  function showResponse(responseText, statusText)  {
    $.fn.colorbox.close();
  }

</script>

无需绑定 cbox_open
并替换：

<a href="javascript:showResponse">Password Reset</a>

使用：

<a class="inline" href="#">Password Reset</a>

使用jquery颜色框取消隐藏DIV以在颜色框中显示密码框

1 个答案: