Search code examples
jqueryasp.netcolorbox

Control not working in a jQuery ColorBox

I have a control which I want to appear using a Colorbox. It's pretty simple, a couple of dropdowns, a text box and a button to submit the content.

The control works fine, but when I use the Colorbox to display it I can't enter any text in the textbox and the submit button doesn't work.

The jQuery to call it is:

 $j(".colorBoxLink").click((function () {
                $j("div#popup").show()
                $j.colorbox({
                    inline: true,
                    href: "#popup",
                    modal: true,
                    scrolling: false,
                    onCleanup: function () {
                        $j("div#popup").hide();
                    }
                });

And the control is located in a div:

<div id='popup' style='display: none'>
     <uc1:TaskCreator runat="server" ID="TaskCreator" /> 
</div>

If I take out the display:none I can run the control fine from the page without popping it up.

Solution

  • Seems that adding the ColorBox moves the form elements outside of the form tag.

    Adding the line:

     $j("#colorbox, #cboxOverlay").appendTo('form:first');

    Resolves the issue