Hộp màu jQuery: Làm cách nào để thay đổi vị trí của hộp màu

Question

Theo mặc định, hộp màu xuất hiện ở giữa theo chiều dọc và chiều ngang trên màn hình. Có cách nào để thay đổi điều đó, ví dụ 10% từ đầu theo chiều dọc và trung tâm theo chiều ngang?

Answer 1

này sẽ ghi đè lên vị trí hàng đầu, và bạn có thể làm tương tự với vv trái:

#colorbox { top: 100px !important; } 

10% từ đầu sẽ phức tạp hơn, bạn sẽ phải thực hiện logic vị của riêng bạn trong một callback onload mỗi khi hộp màu được hiển thị hoặc mở rộng mã của hộp màu nhưng không có cách nào nhanh chóng để thực hiện điều đó.

CẬP NHẬT

hộp thuốc vẽ bây giờ có một tùy chọn built-in để làm điều này:

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

UPDATE 2

Nếu bạn không bị ràng buộc vào hộp thuốc vẽ, tôi khuyên bạn nên sử dụng qTip2.
Xử lý vị trí tốt hơn (kiểu giao diện người dùng jQuery), đầu ra HTML sạch hơn và hỗ trợ IE < 8 dễ dàng hơn.

Answer 2

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

Áp dụng kiểu này trong JSP hoặc các trang web khác.

Answer 3

Bạn có thể sử dụng cài đặt hộp màu khi khởi tạo hộp màu. Ví dụ, để có #colorbox ở cùng độ cao về nơi bạn nhấn vào, sử dụng này (.colorbox là người dùng định nghĩa lớp hộp thuốc vẽ):

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

Bạn cũng có thể ví dụ như thiết lập một đầu tối thiểu và làm cho #colorbox cao hơn một chút

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

Answer 4

tôi phải ghi đè lên vị trí hộp thuốc vẽ một cách nhanh chóng và tìm thấy các giải pháp sau đây:

trong jquery.colorbox.js, hàm publicMethod.position sử dụng một phiên bản cache của các thiết lập. Để chỉnh sửa settings.left/top khi đang chạy, chúng ta cần sử dụng thuộc tính thiết lập đối tượng. Để đạt được điều này, chúng ta cần phải thay thế settings.top/left bởi this.settings.top/left bên trong hàm (ln 499):

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

Bây giờ, chúng ta có thể thay đổi vị trí đối tượng:

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