jQuery colorbox在ASP中中断回发.NET Web窗体

Question

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

通常这是好的，但它实际上从表单标签中取出内容。这使得在colorbox中的提交按钮不再引起回发。

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

如果你点击提交更改按钮，你会注意到，表单张贴到谷歌和窗口加载谷歌。但是，如果单击链接将DIV加载到colorbox中，然后在colorbox中单击提交按钮，则不会发生任何事情。按钮从表单标签中取出。

是否有一个简单的修复这个行为?

编辑

我想用jQuery提交表单，如下所示: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);
});

现在你在这里加载的任何东西都应该在全局表单内

您可以使用的另一种选择器是全局表单的body > form，但它不如id快。

Answer 3

下面的代码打开了一个2按钮表单的颜色框，允许将数据保存回Save按钮上的page behind功能。

1)实际的行内形式

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

Javascript

2)

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

Color box将隐藏的容器追加到

标签，它位于asp <表单>标签…

解决方案是:

追加

标签而不是<</strong>

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

(document.body美元)。附加(叠加,美元框。追加(包装,loadingBay美元));

用以下行替换:

$("形式")。预先考虑(叠加,美元盒子。追加(包装,loadingBay美元));