fancybox把标题放在上面并留在那里
我正在使用Fancybox 2.0，我希望标题框显示在图像上方或图像顶部，而不是下方。
就在所有内容之上。
我试图使fancybox-inner样式position:absolute ，但是fancybox-wrap的高度不会设置为绝对像素。
有人能帮我实现吗？
最好也是最简单的 – 使用助手：
helpers : { title : { type: 'inside', position : 'top' } }
为这些元素添加以下fancybox CSS …
.fancybox-title{position: absolute;top: 0;} .fancybox-skin{position: relative;}
这应该把标题放在首位。
这个代码在jsfiddle： http ： //jsfiddle.net/JYzqR/ 。
$(".fancybox").fancybox({ helpers : { title: { type: 'inside', position: 'top' } }, nextEffect: 'fade', prevEffect: 'fade' });
.fancybox-title { padding: 0 0 10px 0; }
从默认的Fancybox 2.0.6 CSS，替换以下内容：
.fancybox-title { position: absolute; top: -36px; left: 0; visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-title-float-wrap { position: absolute; z-index: 8030; }
这将头部左上方定位，在我看来它看起来最好。 这是一个screengrab：
要通过使用Jquery将标题置于顶部，您可以使用Fancybox回调操作相关的CSS，当加载内容时，使用beforeLoad或afterLoad ，以及使用onUpdate更新Fancybox时。
因此，您可以使用一些最符合您需求的回调： 链接到FancyBox文档
让我们假设您正在使用下面的代码加载您的fancybox，并且为了操纵标题位置，您可以调用“ onUpdate ”和“ afterLoad ”来触发该更改：
JQUERY例子
$(document).ready(function() { $("#my_popup_id").fancybox({ "onUpdate" : function() { $(".fancybox-title").css({'top':'0px', 'bottom':'auto'}); }, "afterLoad" : function() { $(".fancybox-title").css({'top':'0px', 'bottom':'auto'}); } }); });
现在，上面的示例将Fancybox标题置于顶部，但如果您需要在远离框架的外部，则需要将负值设置为“top”，但要考虑到框架不能占据整个屏幕，因此这个新例子的宽度和高度参数：
JQUERY例2
$(document).ready(function() { $("#my_popup_id").fancybox({ "autoSize" : false, "width" : '70%', "height" : '70%', "onUpdate" : function() { $(".fancybox-title").css({'top':'-30px', 'bottom':'auto'}); }, "afterLoad" : function() { $(".fancybox-title").css({'top':'-30px', 'bottom':'auto'}); } }); });
检查提供的文档链接，特别是“回调”选项卡。
编辑：
在这里， 小提琴链接！
新编辑说明：
neokio指出了一个只需对Fancybox样式表进行简单调整的解决方案，因此，对于简单的标题位置控制来说，这是最好的方法 。
这个答案中的一个对于一些更复杂的CSS操作很有用。
编辑：并提供neokio提出的解决方案！
Neokio是在正确的轨道上，但我认为通过在样式表中添加新的类样式然后引用它，对原始代码的破坏性稍微小一些。
// Put at bottom of jquery.fancybox.css, change as needed .fancybox-title-top-wrap { position: absolute; top: -30px; left: 0; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.7); border-radius: 5px; text-shadow: 0 1px 2px #222; color: #FFF; padding: 2px 20px; font-size: 16px; }
然后使用：
helpers: { title: 'top' }
您不会丢失任何原始样式，并且可以根据需要不断添加样式。
Chris Mackie的回答是最干净的。 没有与afterUpload等afterUpload 。你可以添加以推动FancyBox顶部的唯一的东西是边距：
$(document).ready(function() { $('.fancybox').fancybox({ padding : 0, margin : [60, 60, 20, 60], autoSize : false, autoCenter : true, fitToView : true, openEffect : 'fade', closeEffect : 'fade', openSpeed : 100, closeSpeed : 100, width : 900, height : 600 }); });
通过在包含fancybox.css 之后添加以下代码段来覆盖fancybox的默认css
// set modal title above container (overriding default bottom) .fancybox-title-float-wrap { bottom: auto; top: -35px; }
或者，如果你使用LESS构建系统（在这里使用GruntJS），那么就像在你的fancybox-custom.less中一样简单。
@import "fancybox";
以及上面的片段; 这样您就可以在一个地方整合补丁，而不是在应用程序周围散布。
afterLoad : function() { this.outer.prepend( ' 
' ); }
尝试将该代码放入您的fancybox函数中。 例如
$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox({ openEffect : 'none', closeEffect : 'none', afterLoad : function() { this.outer.prepend( ' ' ); }
}）;
并设置类"logoShow" css