Question

我刚刚决定使用Firebug，当创建Fancybox窗口时，它实际上需要我的所有ASP.NET控件（包含在DIV标记中）并将它们放在FORM标记之外。所以我想这就是为什么然后ASP.NET按钮不做任何事情 - 它被放置在窗体之外。

那么，除了使用完全不同的模态对话框之外，你有什么建议我可以阻止这个（或使ASP.NET按钮工作）吗？

编辑：好的，人们报告某些修补程序在某些版本上适用于他们。所以，请务必阅读所有答案/滚动到底部，了解如何在不同的Fancybox版本上解决此问题。

Answer 1

你需要改变它（在jquery.fancybox-1.3.1.js的第719行附近）：

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

到

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

对于需要使用Fancybox版本2来解决此问题的简单方法的人来说，这是一种更简单的方法。您所要做的就是在代码中添加parent：“form：first”，例如

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

然后这会将fancybox元素附加到表单标记内的dom中，而不是在body标记内。

Answer 3

Fancybox版本2.1.4

更改这两行

2069行左右：

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

到

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

在1960线附近：

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

到

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

您也可以使用appendTo，但这取决于您。在我的情况下，我需要prependTo。

Answer 4

我整个星期都试图弄清楚这个问题，我真的没有运气

我刚看到这篇文章

http://usmanshabbir.blogspot.com/2010/10/click-server-button-problem-in-jquery.html

这解释了如何使用jQuery UI对话框进行回发。

如果不是100％使用花式盒子，那么这种方法绝对值得一试，今天给我带来了很多麻烦。

Answer 5

在不改变FancyBox源的情况下，将它放在FancyBox脚本之后（在任何加载事件之外!!!）：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/#.#/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-#.#.#.pack.js"></script>
<script type="text/javascript">

    // Override $.fancybox.init to fix ASP.NET PostBack bug;
    var fancyboxInitOld = $.fancybox.init;
    $.fancybox.init = function () {
        fancyboxInitOld.apply(arguments);
        $("#fancybox-tmp, #fancybox-loading, #fancybox-overlay, #fancybox-wrap").appendTo("form:first");
    };

    // Your code ...

</script>

Answer 6

以上更新对我不起作用，fancybox仍然在表单之外添加。然后我在jquery.fancybox-1.3.2.js中注释掉了那6行，发现它们在我的代码中根本没有被使用。

我在fancybox js文件中对'body'进行了搜索，并将其更改为'form'：

jquery.fancybox-1.3.2.js（ln 484）
jquery.fancybox-1.3.2.pack.js（ln 27，ln 41）

现在，fancybox已添加到表单中，服务器控件正在运行。

Answer 7

jquery.fancybox-1.3.4.js第1040行

//$('body').append(
   $('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>')
        );

在FF和IE9上为我工作（我的asp：Button会回发），谢谢你的解决方案

Answer 8

Fancybox版本：2.1.2

jquery.fancybox.js的第1782行

改变这个：

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

对此：

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

Answer 9

我使用Fancybox 1.3.4将一个aspx页面显示为fancybox iframe中的弹出页面。但是弹出页面中的按钮不会导致回发。我没有像你之前说的那样改变任何东西。相反，我做了以下。

 function check() 
 {
            var validated = Page_ClientValidate();
            if (validated) {
                __doPostBack('<%=bur.ClientID%>','');             
                parent.$.fancybox.close();                                                       
                return true;
            }
            else 
            {
                return false;
            }
 }



 <asp:Button ID="bur" runat="server" Text="ser"  
            OnClientClick="check()"   />


protected void bur_Click(object sender,Eventargs e)
{ //put breakpoint here.

}

Answer 10

Fancybox 1.3.4实际上是回发。

但是如果OnClientClick在服务器端点击事件之前关闭它就不会回发。所以上面是解决这个问题的方法。（在javascript函数中添加doPostBack）。

通常Fancybox 1.3.4会回发而不会对其.Js文件进行任何更改。但要关闭它，需要在服务器端单击事件中写入此行ScriptManager.RegisterClientScriptBlock(this, GetType(), "", "parent.$.fancybox.close();", true);。只有这样才会调用两个服务器端事件，并且fancybox也会关闭。

但是Fancybox 2.1.3（最新版）在OnClientClick关闭后会发回回事件。

Answer 11

如果刷新父级是一个用于此目的的解决方案，则可以刷新onClosed：

$(".fancybox").fancybox({
  'onClosed': function() {
   parent.location.reload(true);
  } 
});

Answer 12

fancybox js库文件没有任何变化，对我来说有用的是

$('.your-selector').fancybox({ 
        afterShow: function () {
            $('.fancybox-overlay').appendTo('form');
        }
});

我已经在表单标签内移动了fancybox div，现在，服务器端按钮就像魅力一样:) 一切都很好..我希望这对你也有用。：）

Answer 13

您无需更改任何代码或任何库...只需尝试此操作..

$('.fancybox').fancybox({
     parent: "form:first", // jQuery selector
});

Answer 14

可能是最糟糕的解决方案，但它对我有用。我需要同时使用faceybox和codebehind。设置您的精美框以在单击按钮时加载。然后onClosed将值传递给另一个C＃页面并在页面加载后执行代码。

<script type="text/javascript">
    $(document).ready(function () {
    $(".fancy").fancybox({
        onClosed: function () {
            window.location.href = "worker_addcarrier.aspx?name=" + document.getElementById('<%=txt_carriername.ClientID%>').value +
                "&password=" + document.getElementById('<%=txt_password.ClientID%>').value +
                "&email=" + document.getElementById('<%=txt_email.ClientID%>').value;
        }
    });
});

然后只是“class =”的事情：

<asp:Button ID="Button1" href="logo.png" runat="server" class="fancy" Text="Create" Width="109px" BorderColor="#009933" OnClick="Button1_Click" />

Fancybox - ASP.NET按钮不起作用

14 个答案: