Colorbox with iframe - closing then opening another
I have a colorbox window that I open in an iframe. Inside this window, I have a link that the user can click on, and ideally I would like to close the current colorbox window and open a new colorbox window (again in an iframe) or load new content into an existing iframe.
My first window opens like this:
$.colorbox({ width: "800px", height: "580px", open: true, iframe: true, href: '/App/View?id=' + id });
When I click a link in that first window, this is what is dismissed:
$.colorbox({ width: "800px", height: "580px", iframe: true, href: "/App/Note?nodeId=" + nodeId })
I tried to close the first window with
parent.$.colorbox.close();
But this ends up closing both windows.
If I don't try to close the second window, the content of the first window opens and I have 2 borders, 2 close buttons, etc.
Any ideas?
Thank.
source to share
Try this which will close the first colorbox and then open a new colorbox with the parent context.
parent.$.colorbox.close();
parent.$.colorbox({ width: "800px", height: "580px", iframe: true, href: "/App/Note?nodeId=" + nodeId });
You should actually have a function on the parent page that does this.
function OpenNote(noteId){
$.colorbox.close();
$.colorbox({ width: "800px", height: "580px", iframe: true, href: "/App/Note?nodeId=" + nodeId });
}
And then call this function when clicking on the link inside the view page passing the note.
parent.OpenNote(id);
source to share
I am using a recursive function to open another colorbox when the colorbox is closed. My function:
<script type="text/javascript">
var colorList = [];
colorList.push('1. Popup Content');
colorList.push('2. Popup Content');
colorList.push('3. Popup Content');
colorList.push('4. Popup Content');
colorboxRecursive(colorList);
function colorboxRecursive(colorList){
if (colorList.length>0) {
$.colorbox({
html:colorList.pop(),
onClosed:function(){
if (colorList.length>0)
colorboxRecursive(colorList);
}
});
}else{
return false;
}
}
</script>
source to share