jquery - 花式框位置绝对左上角

Question

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

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

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

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

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

如果您能帮助我们真正解决这个问题，我们将不胜感激。

先谢谢大家

干杯

卡梅伦

Answer 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