燈箱，浮動的關閉按鈕的iFrame

Question

嘿，我已經決定要改寫這個問題（而不是創建一個新的）外...

我有一個燈箱（彩盒），這將打開一個iFrame與基本的HTML內容。事實上，這裏是一個畫面： alt text http://demo.squeezedigital.com/barrie-test/lightbox-help.gif

我想關閉按鈕是在空心白盒是。

的燈箱（彩盒）CSS是如下，什麼我似乎做的作品。 :(

（在彩盒JS文件可以在這裏找到：http://colorpowered.com/colorbox/）

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} 
#cboxOverlay{position:fixed; width:100%; height:100%;} 
#cboxMiddleLeft, #cboxBottomLeft{clear:left;} 
#cboxContent{position:relative; overflow:hidden; } 
#cboxLoadedContent{overflow:hidden;} 
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} 
#cboxTitle{margin:0;} 
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} 
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} 

#cboxOverlay{background:#890000;} 

#colorBox{} 
    #cboxTopLeft{width:25px; height:25px; background:url(border1.png) 0 0 no-repeat;} 
    #cboxTopCenter{height:25px; background:url(border1.png) 0 -50px repeat-x;} 
    #cboxTopRight{width:25px; height:25px; background:url(border1.png) -25px 0 no-repeat;} 
    #cboxBottomLeft{width:25px; height:25px; background:url(border1.png) 0 -25px no-repeat;} 
    #cboxBottomCenter{height:25px; background:url(border1.png) 0 -75px repeat-x;} 
    #cboxBottomRight{width:25px; height:25px; background:url(border1.png) -25px -25px no-repeat;} 
    #cboxMiddleLeft{width:25px; background:url(border2.png) 0 0 repeat-y;} 
    #cboxMiddleRight{width:25px; background:url(border2.png) -25px 0 repeat-y;} 
    #cboxContent{background:#ab0a0e;} 
     #cboxLoadedContent{margin-bottom:0px;} 
     #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;} 
     #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;} 
     #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;} 
     #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;} 
     #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;} 
     #cboxLoadingOverlay{background:url(loading.gif) 5px 5px no-repeat #fff;} 
     /* THE CLOSE BUTTON */ 
     #cboxClose{position:absolute; top: 10px; right:10px; display:block; color:#000; z-index: 20; display: block; padding-top: 8px; padding-right: 8px; background-image: url(close-button.png); width: 83px; height: 25px;} 

/* IE FIXES */ 
.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=internet_explorer/borderTopLeft.png, sizingMethod='scale');} 
.cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=internet_explorer/borderTopCenter.png, sizingMethod='scale');} 
.cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=internet_explorer/borderTopRight.png, sizingMethod='scale');} 
.cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=internet_explorer/borderBottomLeft.png, sizingMethod='scale');} 
.cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=internet_explorer/borderBottomCenter.png, sizingMethod='scale');} 
.cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=internet_explorer/borderBottomRight.png, sizingMethod='scale');} 
.cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=internet_explorer/borderMiddleLeft.png, sizingMethod='scale');} 
.cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=internet_explorer/borderMiddleRight.png, sizingMethod='scale');} 

Answer 1

。 。感嘆，所以我終於得到它的工作

原來，在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 
      ); 

乾杯反正人。

Answer 2

插入到按鈕，在燈箱的HTML（檢查腳本文件，它必須在那裏）

Answer 3

從討論的圖像不再可用。我籠統地回答這個問題：

如果你想在媒體區（圖像或視頻）以外的關閉按鈕，只需使用在onLoad事件jQuery和「移動」的關閉按鈕：

$('.videoitem', this).colorbox({ 
    onLoad: function() { 
     $('#cboxOverlay').append($('#cboxClose')); 
    }, 
    iframe:true, 
    innerWidth:640, 
    innerHeight:480, 
}); 

我會設置關閉按鈕的樣式，使其更加醒目，但它使用背景圖形。所以我的建議是使用白色的box-shadow box-shadow: 1px 1px 12px #FFF;。或者直接跳過背景圖片並顯示文本標籤：

<style type="text/css"> 
    #cboxClose { 
     text-indent:0; 
     color: #FFF; 
     right: 30px; 
     background-image:none; 
    } 
</style> 

如其他答案中所述，不需要任何核心hack。