Jquery Lightbox,在iFrame外浮动关闭按钮
嘿,我决定改写这个问题(而不是创建一个新问题) 我有一个Lightbox(Colorbox),它打开一个包含基本HTML内容的iFrame。事实上,这里有一张图片: 我希望关闭按钮位于空心白色框的位置 Lightbox(Colorbox)CSS如下所示,我所做的一切似乎都不起作用:( (可以在此处找到Colorbox JS文件:)Jquery Lightbox,在iFrame外浮动关闭按钮,jquery,html,css,lightbox,colorbox,Jquery,Html,Css,Lightbox,Colorbox,嘿,我决定改写这个问题(而不是创建一个新问题) 我有一个Lightbox(Colorbox),它打开一个包含基本HTML内容的iFrame。事实上,这里有一张图片: 我希望关闭按钮位于空心白色框的位置 Lightbox(Colorbox)CSS如下所示,我所做的一切似乎都不起作用:( (可以在此处找到Colorbox JS文件:) 在lightbox的HTML中插入到按钮(检查脚本文件,它必须在那里)。唉,所以我终于让它工作了 事实证明,jQuery.Colorbox.js文件中有一个部分:
在lightbox的HTML中插入到按钮(检查脚本文件,它必须在那里)。唉,所以我终于让它工作了 事实证明,jQuery.Colorbox.js文件中有一个部分:
$content = $div("Content").append(
$loaded = $div("LoadedContent").css({width: 0, height: 0}),
$loadingOverlay = $div("LoadingOverlay"),
$loadingGraphic = $div("LoadingGraphic"),
$title = $div("Title"),
$current = $div("Current"),
$slideshow = $div("Slideshow"),
$next = $div("Next"),
$prev = $div("Previous"),
$close = $div("Close") //This is the problem
);
我只是将代码更改为:
$content = $div("Content").append(
$loaded = $div("LoadedContent").css({width: 0, height: 0}),
$loadingOverlay = $div("LoadingOverlay"),
$loadingGraphic = $div("LoadingGraphic"),
$title = $div("Title"),
$current = $div("Current"),
$slideshow = $div("Slideshow"),
$next = $div("Next"),
$prev = $div("Previous"),
$close = $div("") //Removed the Close class on the Div
);
$content = $div("body").append(
$close = $div("Close") //Append Close button to Body, not Content
);
为大家干杯。问题中的图像不再可用。我一般回答问题: 如果希望关闭按钮位于媒体区域(图像或视频)之外,只需在onLoad事件上使用jquery并“移动”关闭按钮:
$('.videoitem', this).colorbox({
onLoad: function() {
$('#cboxOverlay').append($('#cboxClose'));
},
iframe:true,
innerWidth:640,
innerHeight:480,
});
我会设置关闭按钮的样式以使其更可见,但它使用背景图形。因此,我的建议是使用白色框阴影框阴影:1px 1px 12px 35; FFF;
。或者跳过背景图像并显示文本标签:
<style type="text/css">
#cboxClose {
text-indent:0;
color: #FFF;
right: 30px;
background-image:none;
}
</style>
#cboxClose{
文本缩进:0;
颜色:#FFF;
右:30px;
背景图像:无;
}
正如另一个答案中所述,不需要核心黑客攻击。nice lightbox-很好,它可以让你突破iFrame!我已经重新表述了这个问题Bummer,因此必须对colorbox本身进行黑客攻击:-(,得到了相同的问题,但不允许进行黑客攻击:-(
<style type="text/css">
#cboxClose {
text-indent:0;
color: #FFF;
right: 30px;
background-image:none;
}
</style>