closing jquery colorbox before load breaks jquery,....

Question

I am using jquery colobox to show the popup in my asp.net mvc(C#) application.

Following is the line to call colorbox:

$.fn.colorbox({ href: '/User/Detail', width: "1200px", height: "560px", title: "User Detail", overlayClose: false });

UPDATE(using the below with the latest version):

$.colorbox({ href: '/User/Detail', width: "1200px", height: "560px", title: "User Detail", overlayClose: false });

When i click the close button of colorbox, before it opens, it breaks everything including jquery.

I am showing the user details (Personal, Billing,...) in jquery tabs in the popup which is opened using colorbox. When i click a link to open the colorbox (User details) and when i click the close button, before it loads (when still showing loader), the next time when i click the same link its not showing the tabs and all the events (like click binded through jquery) are broken.

Any idea on this?

Answer 1

Are you using an iframe?... this is from the documentation:

ColorBox broken or displaying incorrectly when loading documents:

Often this is due to not using an iframe when an iframe would be required. The default method, ajax, is only for elements that can exist within a element.

If you are loading a complete HTML document with , , and elements, then using an iframe is required. While nesting these elements may appear to display correctly in some browsers, it is still invalid HTML and should not be depended on. Remember to set the width and height values for ColorBox when using an iframe, it has no way of knowing the dimensions of elements that exist within the iframe.

ColorBox leverages jQuery's load method for handling ajax. If you are loading a document from the same domain as your current document, you can use a selector pull out just the portion of the document that is needed. Example:

$('#example').colorbox({href:"document.html div#content"});