Fancybox - ASP.NET button not working

Question

I've just determined using Firebug that when Fancybox window is created it actually takes all of my ASP.NET controls (contained in DIV tag) and puts them outside FORM tag. So I guess this is the reason why then ASP.NET button doesn't do anything - it is placed outside form.

So, do you have any suggestions how I can prevent this (or make that ASP.NET button work), other than using completely different modal dialog?

EDIT: OK, people are reporting that some of the proposed fixes are working for them on certain versions. So, be sure to read all of the answers / scroll to the bottom for how to fix this issue on different Fancybox versions.

Answer 1

You need to change this (somewhere around line 719 of jquery.fancybox-1.3.1.js):

$('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>')         ); 

to

$('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>') ); 

Answer 2

For anyone needing a simple answer to this problem using Fancybox version 2 theres a much easier way of doing it. All you have to do is add parent: "form:first" in the code eg

    $(document).ready(function () {         $(".various").fancybox({             parent: "form:first",             fitToView: true,             width: '300px',             height: '100px',             autoSize: false,             closeClick: false,             openEffect: 'none',             closeEffect: 'none',             modal: false         });     }); 

then this will append the fancybox elements in the dom inside the form tag, rather than inside the body tag.