Fancybox (1.3) is adding extra divs to my content

Question

I have a newsletter signup form in the footer of my website. In the sidebar I have a link which triggers a fancybox window using the signup form's div as its content.

As expected, this causes the form to dissappear from the footer and pop up in the lightbox.

I close the lightbox and it goes back to how it was. With one extremely annoying exception: It is wrapped in an additional div. The more times I open and close the lightbox window, the more divs it accumulates.

Now, I generally would just have the fancybox grab content from a hidden div (a second copy of the form), but its generated by a plugin in WordPress (mailchimp), and I can't change the #id or form name.

So this is either a bug or a feature of fancybox. I'm 99.9% sure its not me doing something "wrong". Anybody have a way I can remove the wrapped divs? I guesse I can try to put some jquery snippet in onClosed which removes a div from #email_signup... but I'll probably wait until tomorrow to do that.

The relevant code:

js

jQuery("#signMeUpBox a").fancybox({width:250});

html

<a href="#email_signup"><img src="...." /></a>

heres the footer code after a couple fancybox open/closes:

<div style="width:auto;height:auto;overflow: auto;position:relative;">
<div style="width:auto;height:auto;overflow: auto;position:relative;">

    <div id="email_signup" style="">
        <h1 style="">email signup</h1>
        <div id="mc_signup" style="">
            <form method="post" action="#mc_signup" id="mc_signup_form" style="">
                <!-- ... -->
            </form><!-- /mc_signup_form -->
        </div><!-- /mc_signup_container -->
    </div>

</div>
</div>

EDIT

I put together a jsfiddle to illustrate the situation. http://jsfiddle.net/UD9P9/

I probably should just buy a license for fb2... not sure why I'm always so reluctant to purchase software. — Zach Lysobey

JFK JFK · Accepted Answer · 2012-06-28T21:52:24

Yes, it is a known bug when using inline content. As a workaround, add the onCleanup callback as follow:

jQuery("#signMeUpBox a").fancybox({
 "width":250,
 "onCleanup": function() {
  var myContent = this.href;
  jQuery(myContent).unwrap();
 }
});

You can learn more here: http://groups.google.com/group/fancybox/browse_thread/thread/fab7b6d81a173b33

NOTE: the workaround is for v1.3.x, this bug doesn't exist in v2.x

Fancybox (1.3) is adding extra divs to my content

1 Answers