jQuery colorbox打破了ASP.NET Web窗体中的回发

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

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

这是一个代表问题的小提琴： http ： //jsfiddle.net/Chevex/vbLFD/

如果您点击提交更改按钮，您会发现表单发布到谷歌和窗口加载谷歌。 但是，如果单击链接将DIV加载到颜色框中，然后单击颜色框中的提交按钮，则不会发生任何事情。 该按钮已从表单标签中取出。

这种行为有一个简单的解决方法吗？

编辑

我想过用这个小提琴提交jQuery表单： http ： //jsfiddle.net/Chevex/vbLFD/6/

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

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

Answer 1

您可以使用简单的jQuery块将其移动到主窗体的顶部。

$(document).ready(function() { var colorbox = $("#colorbox"); colorbox.remove(); // Removes from dom $('form#idOfForm').prepend(colorbox); }); 

现在你加载的任何东西都应该在全局forms中。

您可以使用的替代选择器是全局表单的body > form form，但它不像id那么快。

Answer 2

我们正在使用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')); } }); }); 

Answer 3

下面打开一个2按钮forms的颜色框，允许将数据保存回保存按钮上的页面后面的function。

1）实际的内联forms

2）Javascript

 $(document).ready(function () { $("#colorbox, #cboxOverlay").appendTo('form:first'); //required for colorbox forms! $("#<%=cmdAdd.ClientID %>").colorbox({ inline: true, href: "#ColorBoxNewDiagram" }); $("#cmdNewDiagram").click(function () { $.fn.colorbox.close(); }); $("#<%=cmdCancelAdd.ClientID%>").click(function () { $.fn.colorbox.close(); return false; }); }); 

Answer 4

颜色框将隐藏的容器附加到标记，该标记位于asp

标记之外…

解决方案是：

附加到

标记而不是标记

在jquery.colorbox.js文件中，搜索以下行：

$（document.body）.append（$ overlay，$ box.append（$ wrap，$ loadingBay））;

用以下行替换它：

$（’form’）。prepend（$ overlay，$ box.append（$ wrap，$ loadingBay））;