我希望你们都能解决我在使用 JQuery Fancy Box 插件时遇到的一个小问题。
我的问题是我正在尝试使用绝对位置,以便无论叠加层大小如何,总有一些东西出现在叠加层的左上角。
http://www.csr500.co.uk/websites/v9/preview.html
现在我想要的是 jQ 和 FW 图标,目前位于左下角,以类似于非覆盖模式的方式定位在左上角。
我这样做的方式意味着标题标签中的文本不会在悬停时显示,这正是我想要的,但是据我所知,这限制了我只能访问 fancybox-title-inside-wrap类而不是 fancy-box-outer 类。
如果您能帮助我们真正解决这个问题,我们将不胜感激。
先谢谢大家
干杯
卡梅伦
最佳答案
只是一个想法:为什么你不把图标从 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
关于jquery - 花式框位置绝对左上角,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16626045/