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



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?



source to share

2 answers

Try this which will close the first colorbox and then open a new colorbox with the parent context.

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({ 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.





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');
    function colorboxRecursive(colorList){
        if (colorList.length>0) {
                    if (colorList.length>0)
            return false;




All Articles