Fancybox - ASP.NET button not working

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

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.

Fancybox Version 2.1.4

Change these 2 lines

Around Line 2069 :

document.all && !document.querySelector ? $('html') : $('body');

to

document.all && !document.querySelector ? $('html') : $('form:first');

and around Line 1960 :

this.overlay = $('<div class="fancybox-overlay"></div>').appendTo('body');

to

this.overlay = $('<div class="fancybox-overlay"></div>').prependTo('form');

You could also use appendTo but that's up to you. In my case I needed prependTo.