將彩盒的標題移到框的頂部？

Question

我使用colorbox在我的項目上打開模態窗口。

有5種風格使用colorbox。我在這個url上使用了示例5：http://www.jacklmoore.com/colorbox/example5/

我想將colorbox.js的標題行（標題屬性文本，背景和關閉圖標）移動到框的頂部 - 它默認爲底部。我該怎麼做？

這是關於實施例5彩盒窗口的普通視圖：

這是我真正想要的：

Answer 1

你要做的兩件事： Th首先很容易;你必須編輯CSS文件（colorbox.css），改變位置規則下列元素：

#cboxTitle, #cboxCurrent, #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow 

使他們的絕對定位是基於「頂」屬性不是「底」屬性。下面是一個例子，之前和之後的編輯（之前的版本被註釋掉）：

/*#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} */ 
    #cboxCurrent{position:absolute; top: 0; left:58px; font-weight:bold; color:#7C7C7C;} 

你不得不嘗試着去獲得正確的價值觀爲「頂級」屬性。

第二件事可能會更困難。該插件使用一個名爲controls.png的圖像「精靈」（一種由許多圖像組成的圖像）​​。看着它，它沒有必要的圖像去做你想做的事情。

如果您有能力使用圖像編輯器，可以修改此圖像並添加必要的圖像，然後根據CSS中典型的精靈使用情況確定使​​用新圖像內容所需的X-Y座標。不知道你是否爲此而戰。

啊，但你認爲這是一個簡單的改變，呃？祝你好運！

Answer 2

找到一個更簡單的方法來改變接近圖像， 改變單詞「靠近」在jquery.colorbox.js

當前你的形象：「{}總的圖像{}電流」， 以前「以前」， 未來： 「下一步」， 結尾： 「」 // 「接近」 xhrError： 「此內容加載失敗」， imgError： 「這圖片加載失敗」，

。

Answer 3

只需將下面提到的代碼複製到您的colorbox.css的底部

#colorbox #cboxClose { top: 0; right: 0; } #cboxLoadedContent{ margin-top:28px; margin-bottom:0; }

Answer 4

編輯colorbox。CSS 製作以下更改

1. Replace 
#cboxLoadedContent{margin-bottom:28px;} 
with 
#cboxLoadedContent{margin-top:28px;} 

2. Replace 
#cboxClose{position:absolute; bottom:0; 
with 
#cboxClose{position:absolute; top:0; 

Answer 5

替換此

 $content = $tag(div, "Content").append(
      $title = $tag(div, "Title"), 
      $current = $tag(div, "Current"), 
      $prev = $('<button type="button"/>').attr({id:prefix+'Previous'}), 
      $next = $('<button type="button"/>').attr({id:prefix+'Next'}), 
      $slideshow = $('<button type="button"/>').attr({id:prefix+'Slideshow'}), 
      $loadingOverlay 
     ); 

     $close = $('<button type="button"/>').attr({id:prefix+'Close'}); 

隨着

$content = $tag(div, "Content").append(
     //$title = $tag(div, "Title"), // comment this line 
     $current = $tag(div, "Current"), 
     $prev = $('<button type="button"/>').attr({id:prefix+'Previous'}), 
     $next = $('<button type="button"/>').attr({id:prefix+'Next'}), 
     $slideshow = $('<button type="button"/>').attr({id:prefix+'Slideshow'}), 
     $loadingOverlay 
    ); 

    $close = $('<button type="button"/>').attr({id:prefix+'Close'}); 
    // add this new code 
    $wrap = $tag(div, "Wrapper").append(
      $title = $tag(div, "Title") 
    );