显示的jquery的fancybox作为AJAX成功

的<a href>链路，其显示的fancybox 和
的<form>，该网页上显示一条消息时subtmit按钮AJAX成功点击。他们都工作得很好。

代码如下。

<script> 
    $(document).ready(function() 
    { //this fancybox appears when <a href="..." ...>...</a> clicked 
     $(".fancybox-effects-d").fancybox({ 
      padding:15, 
      closeBtn:true, 
     }); 

     $("form#submit").submit(function() 
     { 
      var name = $('#name').attr('value'); 
      var password = $('#password').attr('value'); 
      $.ajax({ 
       type:"POST", 
       url:"index/success", 
       data:{ name:name, password:password}, 
       success:function() 
       { 
        //this form disappears and div appears when submit button of the <form id="submit" ...>...</form> clicked 
        $('form#submit').hide(function() 
        { 
         $('div#errors').fadeIn(3000); 

        }); 
       } 
      }); 
      return false; 
     }); 
    }); 
</script>

我想移动fancybox出现在ajax成功。我应该怎么做？

来源

2012-07-19 Haradzieniec

您可以手动调用的fancybox这个简单的功能

$.fancybox(
     '<p>Content of the box in HTML</p>', 
     { 
       padding:15, 
       closeBtn:true 
     } 
    );

只需将它添加到成功的功能。

来源

2012-07-19 14:03:38 user1537927

感谢您的信息。试过了。很棒！ – Haradzieniec 2012-07-19 14:05:19

伙计们，谢谢你们俩。选择最好的答案是很困难的，因为两者都是完美的。 Rob，对不起，我认为这是最好的，因为它更短，更符合我的需求。谢谢大家！ – Haradzieniec 2012-07-19 14:11:21

没问题，我们在这里帮助你，而不是收集尽可能多的分数！ :-) – 2012-07-20 05:57:30

您可以使用对最终用户不可见的链接，并使用jQuery在ajax成功回调中触发它。事情是这样的：

<a id="hiddenlink" href="#fancy" style="display: none;"></a> 

<script> 

    $(document).ready(function() 
    { //this fancybox appears when <a href="..." ...>...</a> clicked 
     $(".fancybox-effects-d").fancybox({ 
      padding:15, 
      closeBtn:true, 
      } 
     }); 

     $("form#submit").submit(function() 
     { 
      var name = $('#name').attr('value'); 
      var password = $('#password').attr('value'); 
      $.ajax({ 
       type:"POST", 
       url:"index/success", 
       data:{ name:name, password:password}, 
       success:function() 
       { 
        $("a#hiddenlink").trigger("click"); 
        //this form disappears and div appears when submit button of the <form id="submit" ...>...</form> clicked 
        $('form#submit').hide(function() 
        { 
         $('div#errors').fadeIn(3000); 

        }); 
       } 
      }); 
      return false; 
     }); 
    }); 
</script>

来源

2012-07-19 13:58:18

哇，它真的有效！谢谢！但是，我的意思是......我想将该lightnbox“移动”到ajax成功，而不是将其复制。我的意思是我不需要页面上的链接来触发灯箱，我只需要灯箱上的Ajax成功。这是灯箱触发链接的最佳解决方案吗？谢谢。 – Haradzieniec 2012-07-19 14:02:49

这是一个解决方案，您也可以在下面的答案中使用该实现。您还可以创建一个简单的页面，并将“href”键设置为您要显示的页面，因为我不喜欢在我的JavaScript内定义页面的标记，并且您可以在不同位置重新使用页面 – 2012-07-19 14:07:31

显示的jquery的fancybox作为AJAX成功

回答

相关问题