0

I'm a novice developer so please excuse me if this is a dumb question. I have a hidden inline form on a page:

<div id="signupPop" class="form" style="display:none"> <!-- FORM CONTENT --> </div>

when a user clicks on a link to download a certain document,

<a class="popMe fancybox" href="#signupPop">Download the Form</a>

a popup appears asking the user to fill it out the said form before downloading the document. My problem arises if the user dismisses the popup form. If they try to click on the link again without refreshing the page, I get the fancybox error "The requested content cannot be loaded. Please try again later." Upon inspecting the DOM and running debugger, I noticed that after the fancybox popup is dismissed, the hidden inline div disappears from the DOM. When the popup is open, the form div is replaced with

<div class="fancybox-placeholder" style="display: none;"></div>

and when the popup is dismissed, the hidden div is no longer on the page. I've been looking at solutions posed for similar issues but I can't seem to get the popup to display multiple times, even after it is dismissed.

I am using FancyBox 2.1.5 and jQuery 1.6.4.

Community
  • 1
  • 1
japaranian
  • 1
  • 3

1 Answers1

0

Not exactly sure why this works, but I was able to get this working by wrapping the form div with another div and setting that div with a display of none:

<div id="formContainer" style="display:none">
    <div id="signupPop" class="form">
    <!-- FORM CONTENT -->
    </div>
</div>

The link would be updated to so:

<a class="popMe fancybox" href="#formContainer">Download the Form</a>

From what I understand there were similar bugs to earlier version of fancybox.

japaranian
  • 1
  • 3