Question

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

我的问题是我正在尝试使用绝对位置，以便在叠加层的左上方始终显示某些内容，而不考虑叠加层大小。

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

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

我这样做的方式意味着标题标签中的文字没有显示在悬停上，这就是我想要的但是从我能说的这个限制我只能访问fancybox-title-inside-wrap而不是花哨的外层阶级。

非常感谢任何帮助解决这个问题。

感谢你们所有人

干杯

卡梅伦

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）的子项。另外通知我必须在clone之前appendTo选择器，因为它将从文档流程中的位置移开，否则在fancybox关闭时清除。当然，它需要适当的风格和位置。

检查 JSFIDDLE

花式盒位置绝对左上角

1 个答案: