Question

I have a slight javascript problem, and this is the reason to why i dislike javascript.
On my page i use Colorbox to popup a div with the possibility to add a new image. Then i use Cutesoft Editor as an Image Picker that opens a Window where the user can select an image. My problem is that the Image Picker window opens behind the Colorbox, so the user can’t select the image unless they close the popup.
Picture of the colorbox and the button for the image picker http://gazet.se/TemporaryFiles/preview.png
I have been reading all the documentation for Cutesoft that i can find and the only command that i can find is editor.FocusDocument() but it still does’t work. I am starting to suspect that Colorbox is causing this problem and that Cutesoft isn’t permitted to display a popup over Colorbox.

Cutesoft guide

Colorbox guide

Code to show the image popup (Executes when the button on the picture is pressed):

function callInsertImage(clientID) {
    var editor1 = document.getElementById('<%=Editor1.ClientID%>');    
    editor1.FocusDocument();  
    var editdoc = editor1.GetDocument();    
    editor1.ExecCommand('new');
    editor1.ExecCommand('InsertImage');
    editor1.FocusDocument();
    InputURL(clientID);
    editor1.FocusDocument();    
}    

function InputURL(clientID)
{
    var editor1 = document.getElementById('<%=Editor1.ClientID%>');
    var editdoc = editor1.GetDocument();  
    var imgs = editdoc.images;
    if(imgs.length > 0) {
        document.getElementById(clientID).value = imgs[imgs.length - 1].src;
        if (document.getElementById(clientID).value.substr(0, 19) == 'http://www.gazet.se')
            document.getElementById(clientID).value = "~" + document.getElementById(clientID).value.substr(19);
        editor1.ExecCommand('new');
        document.getElementById(clientID).focus();   
    }  
    else {
        setTimeout(function() { InputURL(clientID); }, 500); 
    }  
}

Code to open colorbox:

function NewImage() {
    ResetBox();
    this.boxTitle.innerHTML = 'Ny bild';
    this.buttonSave.value = 'Lägg till bilden';        
    $.fn.colorbox({open:true,width:"700px",inline:true,href:"#inline_example1",speed:100});
}

Answer 1

I think it has to do with the css properties of these layers(html elements), which are responsible for the layering order. look into it(i.e. Firebug) and search for z-index. The z-index of the window picker is probably lower than the z-index of the Cutesoft editor.

edit: I just checked it. The Colorbox has z-index:9999; and the ImagePicker has z-index: 8888;. I suggest changing colorbox.css line 6 to

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:8000; overflow:hidden;}