显示：内联；不适用于副本 link

Question

你能解释一下为什么只有第三个 "copy link" 只有在所有面板都关闭时才有效吗？
我希望我的副本 link 在面板中和面板打开时都能正常工作。

这是我的页面： 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>

Answer 1

ZClip 添加了一个绝对定位的 flash (swf) 对象，它紧贴底部，当您的面板关闭时，zclip 对象容器覆盖第三个 link，您无法点击它。查看更新后的 fiddle，我在 zclip 周围放置了一个边框，您可以看到它就在 link 上方：http://jsfiddle.net/4x3qctno/2/

当您打开面板时，它会将第三个 link 向下推，但 zclip 容器保持在同一位置，因此您的 link 可以正常工作。

要解决此问题，请像这样更改 CSS 中 zclip 对象容器的 z-index：

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

显示：内联；不适用于副本 link

display: inline; doesn't work with copy link

html

javascript

css

jquery

zeroclipboard