Проблема с Javascript при смешивании Cutesoft Edit и Colorbox

У меня небольшая проблема с javascript, и это причина, по которой я не люблю javascript. На моей странице я использую Colorbox для всплывающего окна div с возможностью добавления нового изображения. Затем я использую Cutesoft Editor в качестве средства выбора изображений, которое открывает окно, в котором пользователь может выбрать изображение. Моя проблема в том, что окно Image Picker открывается за Colorbox, поэтому пользователь не может выбрать изображение, пока не закроет всплывающее окно. http://gazet.se/TemporaryFiles/preview.png Я прочитал всю документацию по Cutesoft, которую смог найти, и единственная команда, которую я смог найти, это editor.FocusDocument(), но она по-прежнему не работает. Я начинаю подозревать, что Colorbox вызывает эту проблему и что Cutesoft не разрешено отображать всплывающее окно поверх Colorbox.

руководство по Cutesoft

руководство по Colorbox

Код для отображения всплывающего окна с изображением (выполняется при нажатии кнопки на изображении):

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); 
    }  
}

Код для открытия колорбокса:

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});
}

person Patrick    schedule 17.12.2009    source источник
comment
Привет, я отредактировал свой ответ. Теперь это должно быть легко исправить.   -  person RamboNo5    schedule 17.12.2009


Ответы (1)


Я думаю, что это связано со свойствами css этих слоев (элементов html), которые отвечают за порядок слоев. загляните в него (например, Firebug) и найдите z-index. Z-индекс окна выбора, вероятно, ниже, чем z-индекс редактора Cutesoft.

редактировать: я только что проверил. Colorbox имеет z-index:9999;, а ImagePicker — z-index: 8888;. Я предлагаю изменить colorbox.css строку 6 на

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