Jquery Lightbox,在iFrame外浮动关闭按钮

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(Colorbox),它打开一个包含基本HTML内容的iFrame。事实上,这里有一张图片:

我希望关闭按钮位于空心白色框的位置

Lightbox(Colorbox)CSS如下所示,我所做的一切似乎都不起作用:(

(可以在此处找到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>