+1 за простое решение. Я также добавил бы следующую строку, чтобы наложение не перекрывало содержимое. . $ ( '# AspnetForm') добавляет ($ ( '# cboxOverlay')); // <- Поместить перед .append ($ ('# colorbox'));
ользую модальный плагин 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>