Question

I’ve got a form with a textarea, a couple of inputs, and a submit. The fancybox opens perfectly, but when I click any one of the fields for focus, the box immediately closes and re-opens with just the form contents. With the new box only containing the form, if I try to get focus, the same thing happens again, re-opening just the form again.

HTML Form:

<form>
<fieldset class="profile">
<legend>Email John Doe:</legend>

<!-- PASS NAME (to query email) to the script -->
<input type="hidden" name="who" value="John Doe" />

<label for="from">Your Email:</label><br />
<input type="email" id="from" name="from" /><br />
<label for="message">Message:</label><br />
<textarea id="message" name="message" rows="4"></textarea>
<input type="submit" value="Send Email" />
</fieldset>
</form>

jQuery:

$(document).ready(function() {
    $('.profile').fancybox({
        closeClick  : false
    });
});

I’ve worked with fancybox before, but this has me completely stumped. I’m sure it’s something stupid I’m missing, but I’ve got no clue what that stupid thing is.

PS: I’m not sure if it’s relevant, but the content is being loaded via ajax.

Answer 1

I think the culprit is <fieldset class="profile"> which is bound to fancybox so trying to get focus(clicking on) also affects the fieldset tag, which triggers fancybox over and over again.

Use a different class to trigger fancybox or change the class of the fieldset tag.