我正在使用colorbox模态插件（http://colorpowered.com/colorbox/）
我有一个简单的表单坐在母版页中，由于某种原因我无法通过提交按钮发回，它根本没有做任何事情。
似乎是一些人遇到的问题，但我无法找到解决办法。
这里有一些我正在玩的代码，有什么线索吗？
母版页中的代码
<link href="http://www.communitysectorservices.org.au/css/colorbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.communitysectorservices.org.au/js/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({ transition: "fade" });
$("a[rel='example3']").colorbox({ transition: "none", width: "700px", height: "75%" });
$("a[rel='example4']").colorbox({ slideshow: true });
$(".example5").colorbox();
$(".example6").colorbox({ iframe: true, innerWidth: 425, innerHeight: 344 });
$(".example7").colorbox({ width: "80%", height: "80%", iframe: true });
$(".example8").colorbox({ width: "600px", inline: true, href: "#inline_example1" });
$(".example9").colorbox({
onOpen: function () { alert('onOpen: colorbox is about to open'); },
onLoad: function () { alert('onLoad: colorbox has started to load the targeted content'); },
onComplete: function () { alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup: function () { alert('onCleanup: colorbox has begun the close process'); },
onClosed: function () { alert('onClosed: colorbox has completely closed'); }
});
});
</script>
内容页面中的代码
<div style='display: none'>
<div id='inline_example1' style='padding: 10px; background: #fff;'>
<h2 style="color: #da5f33;">
<asp:Label ID="lblEventTitle" runat="server" Text="Label"></asp:Label></h2>
<p>
Please fill out the following form to sign up for the <b>
<asp:Label ID="lblEventTitle2" runat="server" Text="Label"></asp:Label></b></p>
<blockquote>
<p>
<b>
<asp:Label ID="lblName" runat="server" Text="Your Name" Width="120px"></asp:Label></b>
<asp:TextBox ID="txtName" runat="server" Width="350px"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidatorName" ControlToValidate="txtName"
ValidationExpression="^[a-zA-Z ]+$" runat="server" ErrorMessage="*" Style="font-size: xx-small;
font-family: Arial, Helvetica, sans-serif; color: red;"></asp:RegularExpressionValidator><asp:RequiredFieldValidator
ID="RequiredFieldValidatorName" Style="font-size: xx-small; font-family: Arial, Helvetica, sans-serif;
color: red;" ControlToValidate="txtName" Text="*" runat="server" /></p>
<p>
<b>
<asp:Label ID="lblOrganisation" runat="server" Text="Your Organisation" Width="120px"></asp:Label></b>
<asp:TextBox ID="txtOrganisation" runat="server" Width="350px"></asp:TextBox>
</p>
<p>
<b>
<asp:Label ID="lblEmail" runat="server" Text="Your Email" Width="120px"></asp:Label></b>
<asp:TextBox ID="txtEmail" runat="server" Width="350px"></asp:TextBox><asp:RegularExpressionValidator
ID="RegularExpressionValidatorEmail" ControlToValidate="txtEmail" ValidationExpression="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$"
runat="server" ErrorMessage="*" Style="font-size: xx-small; font-family: Arial, Helvetica, sans-serif;
color: red;"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorEmail" Style="font-size: xx-small;
font-family: Arial, Helvetica, sans-serif; color: red;" ControlToValidate="txtEmail"
Text="*" runat="server" /></p>
</blockquote>
<p>
<b>Secury Question</b></p>
<p>
You must answer this question correctly so we can make sure you are human.</p>
<blockquote>
<p>
<b>
<asp:Label ID="lblQuestion" runat="server" Text="5 + 5 =" Width="50px"></asp:Label></b>
<asp:TextBox ID="txtAnswer" runat="server" Width="50px"></asp:TextBox><asp:Label
ID="lblValidate" runat="server" Width="10px"></asp:Label></p>
</blockquote>
<p style="text-align: right; padding-right: 10px;">
<asp:Button ID="Button1" runat="server" Text="Register for Event" /></p>
答案 0 :(得分：5)
感谢Dynde的领导，我能够解决它：
function appendHTML() {
if (!$box && document.forms[0]) {
init = false;
$window = $(window);
$box = $tag(div).attr({ id: colorbox, 'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : '' }).hide();
$overlay = $tag(div, "Overlay", isIE6 ? 'position:absolute' : '').hide();
$wrap = $tag(div, "Wrapper");
$content = $tag(div, "Content").append(
$loaded = $tag(div, "LoadedContent", 'width:0; height:0; overflow:hidden'),
$loadingOverlay = $tag(div, "LoadingOverlay").add($tag(div, "LoadingGraphic")),
$title = $tag(div, "Title"),
$current = $tag(div, "Current"),
$next = $tag(div, "Next"),
$prev = $tag(div, "Previous"),
$slideshow = $tag(div, "Slideshow").bind(event_open, slideshow),
$close = $tag(div, "Close")
);
$wrap.append( // The 3x3 Grid that makes up ColorBox
$tag(div).append(
$tag(div, "TopLeft"),
$topBorder = $tag(div, "TopCenter"),
$tag(div, "TopRight")
),
$tag(div, false, 'clear:left').append(
$leftBorder = $tag(div, "MiddleLeft"),
$content,
$rightBorder = $tag(div, "MiddleRight")
),
$tag(div, false, 'clear:left').append(
$tag(div, "BottomLeft"),
$bottomBorder = $tag(div, "BottomCenter"),
$tag(div, "BottomRight")
)
).find('div div').css({ 'float': 'left' });
$loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none');
$groupControls = $next.add($prev).add($current).add($slideshow);
$(document.forms[0]).append($overlay, $box.append($wrap, $loadingBay));
}
}
我改变的唯一两行是函数的开头和结尾：
if (!$box && document.forms[0]) {
和
$(document.forms[0]).append($overlay, $box.append($wrap, $loadingBay));
答案 1 :(得分：3)
我很确定这个：
是您正在寻找的。
这是因为colorbox div是在form标签之外创建的。在链接中有一个快速修复 - 但是，在其中一条评论中它还说很容易实现一个参数来指定代码中的哪个位置，你想要创建colorbox - 这就是我想做的事情 - 但在我看来，这并不容易：/
答案 2 :(得分：3)
我有同样的问题并在调用colorbox时解决了它，将colorbox元素移动到asp.net表单：
$("a.colorbox").colorbox({
width: 600,
onOpen: function () {
$('#aspnetForm').append($('#colorbox'));
}
});