jQuery colorbox breaks postbacks in ASP.NET Web Forms


We have a web forms project and in it I want to use jQuery's colorbox plugin to pop up a small window with a submit button. Because we are using web forms, the form tag cannot be part of the colorbox. The problem is that when colorbox loads the element in the DOM into the colorbox, it actually moves it to the top of the body into an absolutely positioned element.

Normally this is fine, but it actually takes the contents out of the form tag. This makes it so that submit buttons within the colorbox no longer cause post backs.

Here is a fiddle representing the problem: <a href="http://jsfiddle.net/Chevex/vbLFD/" rel="nofollow">http://jsfiddle.net/Chevex/vbLFD/</a>

If you click the submit changes button you will notice that the form posts to google and the window loads with google. However, if you click the link to load the DIV into colorbox and then click the submit button from within colorbox, nothing happens. The button was taken out of the form tag.

Is there an easy fix for this behavior?


I thought of submitting the form with jQuery as in this fiddle: <a href="http://jsfiddle.net/Chevex/vbLFD/6/" rel="nofollow">http://jsfiddle.net/Chevex/vbLFD/6/</a>

The problem with that is if the DIV contained other input elements, like text boxes, then they too would be removed from the form tag. So even if the form gets submitted with jQuery, the input values that were supposed to be posted with the form will not be included.

It would seem the only way to fix this would be to have colorbox stay within the form somehow.


You can use a simple jQuery block to move it to the top of the main form.

$(document).ready(function() { var colorbox = $("#colorbox"); colorbox.remove(); // Removes from dom $('form#idOfForm').prepend(colorbox); });

Now anything you load in there should be <em>within</em> the global form.

An alternative selector you can use is body > form for the global form, but it's not as fast as an id.


We're using Colorbox v1.4.33, and applying the accepted answer did not solve the problem.

Colorbox creates two separate DIV elements, one with ID=colorbox and one with ID=cboxOverlay. You need to move both of these DIV elements in order for the Colorbox dialog to render correctly and the ASP.NET postback to trigger.

$(function () { $("#btnBoligforholdAdd").colorbox({ inline: true, href: "#modalDialog_Boligforhold", width: "450px", closeButton: false, opacity: 0.5, onOpen: function () { $('#aspnetForm').append($('#cboxOverlay')); $('#aspnetForm').append($('#colorbox')); } }); });


The below opens a colorbox of a 2 button form which allowsthe data to be saved back to the page behind function on the Save button.

1) The actual inline form

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

2) Javascript

$(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; }); });


Color box appends the hidden container to the < body> tag which is outside the asp < form > tag...

Solution is:

<strong>Append to < form > tag instead of the < body > tag</strong>

In the jquery.colorbox.js file, search for the following line:


$(document.body).append($overlay, $box.append($wrap, $loadingBay));


replace it with the following line:


$('form').prepend($overlay, $box.append($wrap, $loadingBay));



  • Make a new font from another one
  • Using `awk` to print number of lines in file in the BEGIN section
  • How can I run an executable .jar file in an R script?
  • Using `rand()` with `having`
  • On step changing check file size and file type Jquery-Steps
  • How to visualize k-means centroids for each iteration?
  • Flask Blueprints: How to use them?
  • qTip tooltip does not appear, jQuery
  • Can I augment images and masks in Keras just using flow() instead of flow_from_directory?
  • Manipulating a group view in a ExpandableListView from the child view
  • CodeIgniter: set_value() or post() - what is faster and what is the best practice to store data into
  • Post method on Angular 5. No error but it doesn't work
  • remove question mark from 301 redirect using htaccess when the user enters the old URL
  • Find nearest known location: Google Reverse Geocoding
  • Define a symbol for an assembly (.s) source file in Android.mk?
  • PostgreSQL in Docker - pg_hba.conf to allow access from host to container
  • Preventing duplicate slashes in file paths in R
  • Google Charts: Animation doesn't work for one chart, pointing annotations in the title area
  • Keep node's X and Z axes parallel to ground while rotating Y axis to face camera
  • Xamarin.Forms bind Height of Grid to Width of Button
  • Selenium - how to switch to a different (login) window that is brought up?
  • Silverlight MVVM, stop SelectionChanged triggering in response to ItemsSource reset
  • jQuery YQL SELECT FROM rss variable
  • How to get a time and Date Separately?
  • Modifying native query cannot have named parameter bindings?
  • Use AutoIt with java applications
  • What does “T extends Junk” mean in a generic class in Java?
  • Excel File upload in asp.net using SqlBulkCopy
  • Set SelectedIndex of ListView in FlipView_SelectionChanged event
  • Ruby on Rails: Get mediaplayer information (iTunes, TRAKTOR, Cog; current song + playlist)
  • How to use Flask's render_template from an ajax POST form submit
  • How do I use libcurl to printf a remote FTP directory listing?
  • Rotating Towards Path in OpenGL
  • Google Spreadsheet Script to Blink a range of Cells
  • How to clear a browser cache in Protractor
  • VSTS work items list through REST API
  • multiple button click in asp.net MVC 3
  • WPF custom control and direct content support
  • ReferenceError: TextEncoder is not defined