display：inline;不適用於複製鏈接

您能否解釋爲什麼只有第三個「複製鏈接」僅在所有面板都關閉時才起作用？
我希望我的複製鏈接可以在面板中打開，並且面板也可以打開。display：inline;不適用於複製鏈接

這是我的PAGE： http://500milligrammes.com/facticemagazine/final/0/

該處是我的代碼：

<!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增加其沾在底部和絕對定位的閃光（SWF）對象當您的面板關閉時，zclip對象容器將覆蓋第三個鏈接，而您無法單擊它。看到更新後的小提琴，我把邊框zclip，你可以看到，它的正上方的鏈接：http://jsfiddle.net/4x3qctno/2/

當您打開面板時，推動第三鏈路，但zclip容器停留在同一個地方，所以你的鏈接工作。

爲了解決這個問題，改變zclip對象容器的z-index CSS中像這樣：

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

來源

2015-09-02 20:31:07

感謝傢伙，你幫了我很多，有效的位置是問題。爲了解決這個問題，我在query.zclip.js上工作 - >我通過繼承和刪除關於top和left px的行來更改位置absolution：D –

是的，你也可以這樣做。有幾種方法，z-index是最簡單的。將來使用代碼檢查器來突出顯示元素並查看所在的位置。覆蓋其他元素的定位元素是一個常見問題... –

只是一個問題，如何在面板內複製鏈接，爲什麼我們看不到邊框：1px純紅色; ？ –

display：inline;不適用於複製鏈接

回答

相關問題