web developer, web designer

There was a nasty little problem I came across with Fancybox that really tested my patience before I noticed what the problem was.

If you pop open a modal window with a contact form in it, you will notice that your form won’t submit with ASP.NET web forms. No js errors, nothing at all. You press your button, the page won’t reload and your modal box stays open.

Fortunately I wasn’t the only one with this problem, thank god for stackoverflow.

So, in jquery.fancybox-1.3.4.js (this was the version I was using) do a quick search for:

$(‘body’).append(

    tmp         = $(‘<div id=”fancybox-tmp”></div>’),

    loading     = $(‘<div id=”fancybox-loading”><div></div></div>’),

    overlay     = $(‘<div id=”fancybox-overlay”></div>’),

    wrap        = $(‘<div id=”fancybox-wrap”></div>’)

);

And replace it with this:

$(‘form’).append(

    tmp         = $(‘<div id=”fancybox-tmp”></div>’),

    loading     = $(‘<div id=”fancybox-loading”><div></div></div>’),

    overlay     = $(‘<div id=”fancybox-overlay”></div>’),

    wrap        = $(‘<div id=”fancybox-wrap”></div>’)

);

If it hasn’t dawned on you what the problem was then don’t change anything and have a look at the source when you have a modal window open, notice how the contents of the modal box get removed outside your ASP.NET form tag but remain as expected with in the body tag.

The code changes above ensure that the modal box markup remains within the form tags and thus ASP.NET can still process it’s web controls.