jQuery colorbox: Wie kann ich die Position der Farbbox ändern?

Question

Standardmäßig erscheint die Farbbox sowohl vertikal als auch horizontal zentriert auf dem Bildschirm. Gibt es eine Möglichkeit dies zu ändern, zum Beispiel auf 10% von oben vertikal und horizontal zentriert?

Answer 1

Dies wird die Top-Position zu überschreiben, und Sie können mit links etc das gleiche tun:

#colorbox { top: 100px !important; } 

10% von oben wäre schwieriger, würden Sie Ihre eigene Positionierung Logik in einem onload Rückruf implementieren müssen Jedes Mal, wenn die Farbbox angezeigt wird, oder den Code der Farbbox erweitern, aber keine schnelle Möglichkeit, dies zu tun.

UPDATE

Colorbox hat jetzt eine eingebaute Option, dies zu tun:

$("a").colorbox({ top: 100, left: "50%" }) 

UPDATE 2

Wenn Sie nicht zu colorbox gebunden sind, empfehle ich mit qTip2.
Weit bessere Position Handhabung (jQuery UI-Stil), sauberere HTML-Ausgabe und einfacher IE < 8 Unterstützung.

Answer 2

#cboxWrapper{ 
    position:fixed; 
    top:100px; 
    left:300px; 
    z-index:9999; 
    overflow:hidden; 
} 

Wenden Sie diesen Stil in Ihrer JSP oder anderen Webseiten an.

Answer 3

Sie können eine Colorbox-Einstellung verwenden, wenn Sie die Colorbox initialisieren. Um zum Beispiel die #colorbox auf gleicher Höhe haben, wo Sie geklickt haben, verwenden Sie diese (.colorbox die colorbox Klasse Benutzer definiert ist):

$(".colorbox").each(function(i) { 
    var offset = $(this).offset(); 
    $(this).colorbox({top:offset.top}); 
}); 

Sie können auch zum Beispiel eine Mindest oben gesetzt und die #colorbox machen ein wenig höher

$(".colorbox").each(function(i) { 
    var offset = $(this).offset(); 
    var o = offset.top-200; 
    if(o<100){o=100;} 
    $(this).colorbox({top:o}); 
}); 

Answer 4

ich hatte colorbox Position im Fluge und fand die folgende Lösung außer Kraft zu setzen:

In jquery.colorbox.js, die publicMethod.position Funktion verwenden, um eine Cache-Version von Einstellungen. Um settings.left/top im laufenden Betrieb zu ändern, müssen wir die Eigenschaft der Objekteinstellungen verwenden. Um dies zu erreichen, müssen wir settings.top/left durch this.settings.top/left innerhalb der Funktion (ln 499) ersetzen:

if(typeof this.settings!="undefined"){ 
    settings.left=this.settings.left; 
    settings.top=this.settings.top; 
} 
if (settings.right !== false) {... 

Jetzt können wir Objektposition ändern:

$.colorbox.settings.left=newLeft; 
$.colorbox.settings.top=newTop; 
$.colorbox.position();