Colorbox with iframe - closing then opening another one

Question

I have a colorbox window I open in an iframe. Inside that window I have a link that a user can click on and ideally I'd like the current colorbox window to close and a new colorbox window to open (again in an iframe) or load new content into the existing iframe.

My first window opens like so:

$.colorbox({ width: "800px", height: "580px", open: true, iframe: true, href: '/App/View?id=' + id });

When I click on a link in that first window this is what is fired:

$.colorbox({ width: "800px", height: "580px", iframe: true, href: "/App/Note?nodeId=" + nodeId })

I've tried to close the first window with:

parent.$.colorbox.close();

But that ends up closing both windows.

If I don't try and close the second window opens in the content of the first window and I have 2 borders, 2 close buttons etc.

Any ideas?

Thanks.

Answer 1

Try to execute this which will close the first colorbox and then open the new colorbox with parent's context.

parent.$.colorbox.close(); 
parent.$.colorbox({ width: "800px", height: "580px", iframe: true, href: "/App/Note?nodeId=" + nodeId });

Actually you should have a function in the parent page which will do this.

function OpenNote(noteId){
   $.colorbox.close(); 
   $.colorbox({ width: "800px", height: "580px", iframe: true, href: "/App/Note?nodeId=" + nodeId });
}

And then call this function on click of the link inside View page passing the noteId.

parent.OpenNote(id);