colorbox + asp.net按鈕不會回發

Question

我正在使用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>&nbsp;
            </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>

Answer 1

感謝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));

Answer 2

我有同樣的問題，並在colorbox調用時解決了它，將colorbox元素移動到asp.net表單：

$("a.colorbox").colorbox({
    width: 600,
    onOpen: function () {
        $('#aspnetForm').append($('#colorbox'));
    }
});

Answer 3

我很確定這個：

http://onefishmedia.com/onefishmedia/post/2010/04/29/Getting-ASPNET-Server-Controls-to-work-within-Fancybox-or-Colorbox-plugins.aspx

是你在找什么。

之所以會發生這種情況，是因為colorbox div是在表單標記之外創建的。 在鏈接中有一個快速修復 - 但是，在其中一條評論中它還說很容易實現一個參數來指定代碼中的哪個位置，你想要創建colorbox - 這就是我想做的事情 - 但在我看來，這並不容易：/