title: display jquery fancybox as ajax success
body: <p>I have: </p>
  
  <ul>
  <li>the <code>&lt;a href&gt;</code> link that displays a fancybox 
  and </li>
  <li>the <code>&lt;form&gt;</code>, that displays a message on the page when subtmit button clicked on ajax success. 
  They both work fine.</li>
  </ul>
  
  <p>The code is below.</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function ()
      { //this fancybox appears when &lt;a href="..." ...&gt;...&lt;/a&gt; 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 &lt;form id="submit" ...&gt;...&lt;/form&gt; clicked
                      $('form#submit').hide(function ()
                      {
                          $('div#errors').fadeIn(3000);
  
                      });
                  }
              });
              return false;
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I want to move that fancybox to appear on ajax success. How should I do that?</p>