c# - Fancybox - ASP.NET 按钮不起作用

Question

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

那么，除了使用完全不同的模式对话框之外，您有什么建议可以防止这种情况（或使 ASP.NET 按钮工作）吗？

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

score 33 · Accepted Answer

您需要更改它（在 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>')
);

score 19 · Accepted Answer

对于任何需要使用 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
        });
    });

那么这将在表单标签内的dom中附加fancybox元素，而不是在body标签内。

score 5 · Accepted Answer

Fancybox 2.1.4 版

更改这 2 行

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。

score 4 · Accepted Answer

在不改变 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>

score 4 · Accepted Answer

我整个星期都在试图解决这个问题，我真的没有任何运气

刚看到这篇文章

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

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

如果不是 100% 必须使用花哨的盒子，那么这种方法绝对值得一试，今天它为我省去了很多麻烦。

score 2 · Accepted Answer

上面的更新对我不起作用，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 已添加到表单中，并且服务器控件正在工作。

score 2 · Accepted Answer

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 回发），感谢您的解决方案

score 1 · Accepted Answer

我使用 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.

}

score 1 · Accepted Answer

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

score 0 · Accepted Answer

没有对fancybox js库文件进行任何更改，对我有用的是下面，

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

我已经在表单标签中移动了 fancybox div，现在，服务器端按钮就像一个魅力 :) 一切顺利.. 我希望这对你也有用。.:)

score 0 · Accepted Answer

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 中关闭后会执行回发事件。

score 0 · Accepted Answer

如果刷新父级是一个可以达到目的的解决方案，您可以刷新 onClosed：

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

score 0 · Accepted Answer

您不需要更改任何代码或任何库......试试这个..

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

score 0 · Accepted Answer

这是最糟糕的解决方案，但它对我有用。我同时需要 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" />

c# - Fancybox - ASP.NET 按钮不起作用

14 回答 14

Related

Reference