Question

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

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

这是表示问题的小提琴： http://jsfiddle.net/Chevex/vbLFD/

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

是否可以轻松解决此问题？

修改

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

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

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

Answer 1

我们正在使用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 2

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

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

现在你加载的任何东西都应该是 in 全局形式。

您可以使用的替代选择器body > form用于全局表单，但它不如ID快。

Answer 3

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

1）实际的内嵌形式

<div style="display: none;">
  <div id="formcontent" class="form-horizontal padder">
    <!--no <form> tag here as its inline content-->
  </div>
</div>

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

颜色框将隐藏的容器附加到＆lt;体＆GT;在asp之外的标签＆lt;形式＆gt;标签...

解决方案是：

追加至＆lt;形式＆gt;标签而不是＆lt;身体＆gt;代码

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

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

将其替换为以下行：

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

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

修改

4 个答案: