title: Visible inline div disappears after being displayed with fancyBox
body: <p>I am posting a problem and solution here to help anyone who has experienced the same problem as me.</p>
  
  <p>I have a <code>&lt;div&gt;</code> on my page which I wanted to allow the user to 'zoom' to by clicking on an icon. The <code>&lt;div&gt;</code> is not hidden.</p>
  
  <p>I used fancyBox (<a href="http://fancyapps.com/fancybox/" rel="noreferrer">fancyBox home page</a>) to display the <code>&lt;div&gt;</code> as a sort of modal window.  The reason I used fancyBox over other lightbox type plugins is that it does not duplicate the contents of the <code>&lt;div&gt;</code>, but moves it, so all form elements, etc. continue to work.
  The problem is that after closing the fancyBox window, the <code>&lt;div&gt;</code> is hidden on the main page.</p>
  
  <p>The solution:</p>
  
  <p>I used fancyBox 2.1.2.</p>
  
  <p>I used a solution posted by JFKDIAZ on github (<a href="https://github.com/fancyapps/fancyBox/issues/103" rel="noreferrer">https://github.com/fancyapps/fancyBox/issues/103</a>) to ensure that the div was returned to its parent after closing the fancyBox window.</p>
  
  <p>I then used the jquery show functionality to display the div inline again.</p>
  
  <p>My code to initialise the fancy box is below. Note the <code>beforeLoad</code> and <code>afterClose</code> functions to identify the parent <code>&lt;div&gt;</code> and return the <code>&lt;div&gt;</code> back to its parent (thanks to JFKDIAZ for this). Note the addition of <code>$(inlineTarget).show();</code> to display the <code>&lt;div&gt;</code> again so that it does not disappear. The remainder is the standard initialisation for fancyBox.</p>
  
  <pre><code>        $(document).ready(function() {
          $(".various").fancybox({
              beforeLoad: function() {
                  inlineTarget = this.href;
                  parentNodename = $(inlineTarget).parent().get(0).tagName.toLowerCase();
                  $(inlineTarget).parent(parentNodename).addClass("returnTo");
              },
              afterClose: function() {
                  $(inlineTarget).appendTo(".returnTo");
                  $(".returnTo").removeClass("returnTo");
                  $(inlineTarget).show();
              },
              maxWidth: 880,
              maxHeight: 600,
              fitToView: false,
              width: '70%',
              height: '70%',
              autoSize: false,
              closeClick: false,
              openEffect: 'none',
              closeEffect: 'none'
          });
      });
  </code></pre>
  
  <p>My code for the <code>&lt;div&gt;</code> and the link to display the <code>&lt;div&gt;</code> in the fancyBox is below. Note that the parent <code>&lt;div&gt;</code> must have an <code>id</code> so that the code can recognise it. The class <code>various</code> is the tag I use to identify which <code>&lt;a&gt;</code> element I must apply the fancyBox to.</p>
  
  <pre><code>    &lt;a href="#application_form" class="various"&gt;Zoom&lt;/a&gt;
      &lt;div id="application_parent"&gt;
          &lt;div id="application_form"&gt;
              Contents to display in fancyBox and return back here when complete.
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This worked for me very well. All form elements were moved to the fancyBox and back to their original position on the page.</p>
  
  <p><strong>UPDATE</strong> (moved link to fiddle from comments) - For a DEMO see :<a href="http://jsfiddle.net/z8e9q/3/" rel="noreferrer">http://jsfiddle.net/z8e9q/3/</a></p>
  
  <p>I hope this helps someone who has the same problem.</p>