дисплей: встроенный; не работает с копией ссылки

Можете ли вы объяснить мне, почему только третья «копия» работает только в том случае, если все панели закрыты?
Я хочу, чтобы моя копия работала, когда она находится в панели, и когда панель тоже открыта.дисплей: встроенный; не работает с копией ссылки

ВОТ МОЯ СТРАНИЧКА: http://500milligrammes.com/facticemagazine/final/0/

JSFIDDLE

Вот мой код:

<!DOCTYPE HTML> 
<!--[if IE 8]><html lang="en" class="lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> 
<html lang="en"> 
<!--<![endif]--> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script> 

    <style> 
     .panel1, 
     .panel2 { 
      display: none; 
      border: 1px solid #ccc; 
      background-color: #eee 
     } 

     .flip1, 
     .flip2 { 
      border: 1px solid #ccc; 
      background-color: #eee 
     } 

     #check, 
     #check2 { 
      visibility: hidden; 
      width: 12px; 
      height: 12px; 
     } 

     span#copy-callbacks, 
     span#copy-callbacks2 { 
      float: none; 
      cursor: pointer; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("span#copy-callbacks").zclip({ 
       path: "ZeroClipboard.swf", 
       copy: $('#callback-paragraph').text(), 
       beforeCopy: function() { 
        $('#copy-callbacks').css('background', 'none'); 
       }, 
       afterCopy: function() { 
        $('#copy-callbacks').css('background', 'none'); 
       } 
      }); 

      document.getElementById("copy-callbacks").onclick = function() { 
       document.getElementById("check").style.visibility = "visible"; 
      } 
     }); 


     $(document).ready(function() { 
      $('span#copy-callbacks').hover(
       function() { 
        $(this).css({ 
         "color": "#e0ccb4" 
        }); 
       }, 

       function() { 
        $(this).css({ 
         "color": "#000" 
        }); 
       } 
      ); 




      $("span#copy-callbacks2").zclip({ 
       path: "ZeroClipboard.swf", 
       copy: $('#callback-paragraph2').text(), 
       beforeCopy: function() { 
        $('#copy-callbacks2').css('background', 'none'); 
       }, 
       afterCopy: function() { 
        $('#copy-callbacks2').css('background', 'none'); 
       } 
      }); 

      document.getElementById("copy-callbacks2").onclick = function() { 
       document.getElementById("check2").style.visibility = "visible"; 
      } 
     }); 


     $(document).ready(function() { 
      $('span#copy-callbacks2').hover(
       function() { 
        $(this).css({ 
         "color": "#e0ccb4" 
        }); 
       }, 

       function() { 
        $(this).css({ 
         "color": "#000" 
        }); 
       } 
      ); 




      $(".flip1").click(function() { 
       $(".panel1").slideToggle("fast"); 
      }); 

      $(".flip2").click(function() { 
       $(".panel2").slideToggle("fast"); 
      }); 
     }); 
    </script> 
</head> 

<body> 





    <div class="flip1">Click to slide the first panel down or up</div> 
    <div class="panel1"> 

     when this panel is open, any copy link works !!! 

    </div> 





    <div style="margin-top:150px;" class="flip2">Click to slide the second panel down or up</div> 
    <div class="panel2"> 
     when a copy link is inside a panel, it doesn't work !!! 
     <br/> 
     <br/> 

     <span id="copy-callbacks">Copy link&nbsp;&nbsp;<img src="check.png" id="check" style="display: inline;"></span> 
     <span style="font-size:0px;" id="callback-paragraph">essaie sans alert</span> 

    </div> 





    <div style="margin-top:150px; "> 
     This one works perfectly when all panels are closed !! 
     <br/> 
     <span id="copy-callbacks2">Copy link&nbsp;&nbsp;<img src="check.png" id="check2" style="display: inline;"></span> 
     <span style="font-size:0px;" id="callback-paragraph2">essaie sans alert</span> 
    </div> 





    <script type="text/javascript" src="jquery.zclip.js"></script> 
    <script type="text/javascript" src="jquery.cbpFWSlider.min.js"></script> 
</body> 

</html>

источник

2015-09-02 faty fatoumata

ZClip добавляет абсолютно позиционирован Flash (SWF) объект, который цепляется на дно и когда ваши панели закрыты, контейнер объекта zclip закрывает третью ссылку, и вы не можете щелкнуть по ней. Смотрите обновленную скрипку, я ставлю рамку вокруг zclip, и вы можете видеть, что это прямо по ссылке: http://jsfiddle.net/4x3qctno/2/

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

Чтобы это исправить, изменить Z-индекс zclip контейнера объекта в CSS следующим образом:

.zclip{ 
    z-index:-1000!important; 
}

источник

2015-09-02 20:31:07

благодаря парень, вы мне очень помогают, эффективно позиция была проблема. для решения этой проблемы я работал над query.zclip.js -> i изменяю положение абсол ции путем наследования и удаления строки о верхнем и левом px: D –

Да, вы тоже можете это сделать. Существует несколько способов: z-index является самым простым. В будущем используйте инспектор кода, чтобы выделить элементы и посмотреть, что там. Позиционированные элементы, охватывающие другие элементы, являются общей проблемой ... –

вопрос, как насчет ссылки на копию внутри панели, почему мы не видим границы: 1px сплошной красный; ? –

дисплей: встроенный; не работает с копией ссылки

ответ

Смежные вопросы