花式框位置绝对左上角答案

【问题标题】：Fancy Box Position Absolute Top Left花式框位置绝对左上角
【发布时间】：2013-05-19 08:13:03
【问题描述】：

我希望你们都可以解决我在使用 JQuery Fancy Box 插件时遇到的一个小问题。

我的问题是我正在尝试使用绝对位置，这样无论叠加层大小如何，总有一些东西出现在叠加层的左上角。

http://www.csr500.co.uk/websites/v9/preview.html

现在我想要的是 jQ 和 FW 图标，目前在左下角，以类似于非覆盖模式的方式定位在左上角。

我这样做的方式意味着标题标签中的文本不会在悬停时显示，这是我想要的，但是据我所知，这限制了我只能访问 fancybox-title-inside-wrap类而不是花哨的盒子外部类。

非常感谢您对解决此问题的任何帮助。

谢谢大家

干杯

卡梅隆

【问题讨论】：

但是覆盖是fancybox的暗区，它总是占据浏览器的全尺寸，所以你只想让fancybox弹出窗口一直出现在0,0？

标签： jquery css fancybox fancybox-2

【解决方案1】：

只是一个想法：为什么不将图标从title 部分中取出并创建一个新的（隐藏的）div，就像

<div class="iconsPlaceHolder" style="display: none">
    <div class="overlay-technologies">
        <div class="overlay-technology-1">
            <div class="dev-icon"></div>
        </div>
        <div class="overlay-technology-2">
            <div class="web-icon"></div>
        </div>
    </div>
</div>

注意新类iconsPlaceHolder，但可以是任何你想要的。

然后使用beforeShow 回调将它们附加到您的fancybox 中

beforeShow: function () {
    $(".overlay-technologies").clone().appendTo(".fancybox-inner");          
}

注意，我正在附加 .overlay-technologies 选择器，它是占位符 (.iconsPlaceHolder) 的子代。另外注意，我必须在appendTo 之前添加clone 选择器，因为它会从文档流中的位置移动，并在fancybox 关闭时清除。当然，它需要合适的风格和位置。

检查JSFIDDLE

【讨论】：

您好 JFK，感谢您回复我。我可能忘记提及的是，我希望不同的图标出现在不同的叠加层中，而不是每个叠加层中的相同。我已经更新了我的代码，并且可以再次在此处找到链接csr500.co.uk/websites/v9/preview.html 但我希望每个图标中都有不同的图标和不同的数字，而不是简单地出现在所有图标中的“最后一个”图标，任何有助于解决这个问题真的会非常感激。谢谢卡梅伦
所以左边的项目应该有图标 1（开发）和 2（网络），中间项目应该有图标 3（关于）和 4（联系人），最右边应该有图标 5（html ) 和 6 (css) 而不是所有的图标都有 5 和 6。