zeroClipboard complex css проблема

Question

У меня есть список изображений и на мышь, там есть окно с иллюстрациями, в которое встроено поле ввода кода для копирования. теперь я реализовал zeroclipboard на нем, для того, чтобы сделать функцию копирования нажатой, поэтому, когда я нажимаю на изображение, он показывает окно выбора правильно, но когда я нажимаю на мышь, чтобы щелкнуть по полю ввода, чтобы скопировать код, закрыто, думая, что его не в опционном div больше, потому что zeroclipboard имеет div поверх него, поэтому мышь идет на него, и он закрывается.

поэтому решение было создать этот div внутри опции div, о которой заботился, но теперь стиль zeroclipboard div отображается неправильно, и я не знаю, как его исправить.

следующий стиль для zeroclipboar, я не знаю, какой стиль установить на нем, поэтому его над полем ввода, поэтому я могу щелкнуть по нему, и поэтому он отлично работает, как это обычно делается.

on line 107 in zeroclipboard.js 
var style = this.div.style; 
    style.position = 'absolute'; 
    style.left = '' + box.left + 'px'; 
    style.top = '' + box.top + 'px'; 
    style.width = '' + box.width + 'px'; 
    style.height = '' + box.height + 'px'; 
    style.zIndex = zIndex; 

Answer 1

$("input[name='htmlcode'], input[name='directlink'], input[name='emaillink'], input[name='imgcode']").live('mouseover', function() { 

     clip = new ZeroClipboard.Client(); 
     clip.setHandCursor(true); 
     clip.setText($(this).val()); 

     var width = $(this).width(); 
     var height = $(this).height()+10; 
     var flash_movie = '<div>'+clip.getHTML(width, height)+'</div>'; 
     // make your own div with your own css property and not use clip.glue() 
     flash_movie = $(flash_movie).css({ 
      position: 'relative', 
      marginBottom: -height, 
      width: width, 
      height: height, 
      zIndex: 101 
      }) 
     .click(function() { // this puts copied indicator for showing its been copied! 
      $(this).next('input').indicator({className: 'copied', wrapTag: 'div', text: 'Copied!', fadeOut: 'slow', display: 'after'}); 
     }); 

     $(this).before(flash_movie); // if you want to put after and not before, then you have to change the marginBottom to marginTop 
    }); 

Answer 2

Я не знаю, что ваш код выглядит, но когда вы показываете ваши варианты с помощью окна зависать или/MouseOut курсора, находящегося, просто включите нулевой буфер обмена DIV ... что-то вроде этого (я считаю, что это правильный идентификатор объекта для использования):

$('img.someimage, .optiondiv, #ZeroClipboardMovie_1').hover(function(){ 
    $('.optiondiv') 
    // positioning stuff here 
    .show() 
}) 

Answer 3

когда я нулевой буфер, я заметил, что это было лучше, чтобы переместить его к отрицательному левое положение, когда мне не нужно это. Такие, как:

#clipboardContainer {position:absolute; top:0; left:-1000px;} 

Я не совсем понимаю ваш вопрос, но динамически перемещая его от места, где он вызывает вас проблемы может быть способ, чтобы решить вашу проблему.

Answer 4

Просто для интереса:

Мой подход использует данные атрибуты для активации функции копирования. В дополнение к этому он устанавливает hover & активных классов на элемент Element.

Использование:

HTML:

<button data-zc-copy-value="this is the text to copy">some text<button> 

Javascript:

$(document).on('mouseover', '*[data-zc-copy-value]', function() { 
     var that = $(this), 
      width = that.outerWidth(), 
      height = that.outerHeight(); 

     if(that.data("zc-activated") !== "true"){ 
     // init new ZeroClipboard client 
     clip = new ZeroClipboard.Client(); 
     clip.setHandCursor(true); 
     clip.setText(that.data('zc-copy-value')); 

     var flash_movie = '<div>'+clip.getHTML(width, height)+'</div>'; 
     // make your own div with your own css property and not use clip.glue() 
     flash_movie = $(flash_movie).css({ 
      position: 'relative', 
      marginBottom: -height, 
      width: width, 
      height: height, 
      zIndex: 101 
     }); 

     // delegate mouse events 
     flash_movie.hover(function(){ 
      that.addClass('hover'); 
     },function(){ 
      that.removeClass('hover'); 
     }); 
     flash_movie.mousedown(function(){ 
      that.addClass('active'); 
     }); 
     flash_movie.mouseup(function(){ 
      that.removeClass('active'); 
     }); 

     // add flash overlay 
     $(this).before(flash_movie); // if you want to put after and not before, then you have to change the marginBottom to marginTop 

     that.data("zc-activated", "true"); 
     } 
    });