Fancybox & ASP.NET Web Forms

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:


    tmp         = $(‘</pre>
<div id="”fancybox-tmp”"></div>

    loading     = $(‘</pre>
<div id="”fancybox-loading”"></div>

    overlay     = $(‘</pre>
<div id="”fancybox-overlay”"></div>

    wrap        = $(‘</pre>
<div id="”fancybox-wrap”"></div>


And replace it with this:


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.


Published by

Alan Feekery

Developer, Gamer, Musician, Cyclist and big Motorsport fan... enjoys the odd cup of coffee :)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s