Skip to main content
 首页 » 编程设计

c#之jQuery colorbox 破坏 ASP.NET Web 窗体中的回发

2024年01月25日27lvdongjie

我们有一个 Web 表单项目,我想在其中使用 jQuery 的 colorbox 插件来弹出一个带有提交按钮的小窗口。因为我们使用的是 Web 表单,所以表单标签不能成为 colorbox 的一部分。问题在于,当 colorbox 将 DOM 中的元素加载到 colorbox 中时,它实际上将它移动到 body 的顶部,成为一个绝对定位的元素。

通常这很好,但实际上它会从表单标签中取出内容。这使得颜色框中的提交按钮不再导致回发。

这是代表问题的 fiddle : http://jsfiddle.net/Chevex/vbLFD/

如果您单击提交更改按钮,您会注意到该表单已发布到 google,并且该窗口加载了 google。但是,如果您单击链接将 DIV 加载到 colorbox,然后单击 colorbox 中的提交按钮,则什么也不会发生。该按钮已从表单标签中取出。

是否有解决此问题的简单方法?

编辑

我想用 jQuery 提交表单,就像在这个 fiddle 中一样:http://jsfiddle.net/Chevex/vbLFD/6/

问题是如果 DIV 包含其他输入元素,如文本框,那么它们也会从表单标签中删除。因此,即使使用 jQuery 提交表单,也不会包含本应与表单一起发布的输入值。

解决这个问题的唯一方法似乎是让 colorbox 以某种方式保留在表单中。

请您参考如下方法:

我们使用的是 Colorbox v1.4.33,应用已接受的答案并没有解决问题。

Colorbox 创建两个独立的 DIV 元素,一个 ID=colorbox,一个 ID=cboxOverlay。您需要移动这两个 DIV 元素,以便正确呈现 Colorbox 对话框并触发 ASP.NET 回发。

    $(function () { 
        $("#btnBoligforholdAdd").colorbox({ 
            inline: true, 
            href: "#modalDialog_Boligforhold", 
            width: "450px", 
            closeButton: false, 
            opacity: 0.5, 
            onOpen: function () { 
                $('#aspnetForm').append($('#cboxOverlay')); 
                $('#aspnetForm').append($('#colorbox')); 
            } 
        }); 
    });