Chức Fancybox 2 tay

Question

tôi có thể không cho cuộc sống của tôi, tìm ra làm thế nào tôi có thể đặt lại vị trí Fancybox 2 sử dụng left: 47px; và top: 147px

tôi đọc qua các mã nguồn, và không có hack nó, tôi không thấy một cách để ghi đè vị trí.

Đặt autoCenter thành sai chỉ dừng tự động định tâm sau thời gian đầu tiên trước khi thực hiện.

Sử dụng jQuery để thay đổi CSS hoặc đưa ra trình bao bọc tùy chỉnh để áp dụng CSS không hoạt động, vì Fancybox luôn thêm CSS nội tuyến ghi đè tất cả các lần thử của tôi.

Có cách nào để yêu cầu Fancybox ngừng tự định vị và sử dụng vị trí tuyệt đối của tôi không?

Answer 1

Bạn có thể override inline CSS kiểu bằng cách sử dụng công cụ sửa đổi !important.

Đối với trường hợp sử dụng Fancybox sau đây sẽ ghi đè lên các vị JavaScript:

.fancybox-wrap { 
    top: 147px !important; 
    left: 47px !important; 
} 

Answer 2

Có thể bạn không thay đổi css như vậy? Rõ ràng việc thay đổi thuộc tính margin để 'đỉnh' và 'trái'

$("a.fancybox1").fancybox({ 
'hideOnContentClick': false, 
     'onComplete' : function() { 
      $("#fancybox-wrap").css('margin', 'auto'); 
     } 
    }); 

Answer 3

tôi giải quyết vấn đề này bằng cách bổ sung bằng tay một css-class mới trong beforeShow-Handler. Tôi đã sử dụng fancybox2.

css:

.fancybox-wrap22 { 
    top: 22% !important; 
} 

js:

$(".open_fancybox").click(function() { 
    $.fancybox.open('<h1>lorem ipsum</h1>', { 
    beforeShow : function() { 
     $('.fancybox-wrap').addClass('fancybox-wrap22'); 
    } 
    }); 
    return false; 
}); 

Answer 4

Tôi đoán bạn không thể thay đổi css theo cách đó, gây ra cốt lõi Fancybox được chỉnh sửa thuộc tính phong cách của # Fancybox-wrap tất cả thời gian. Vì vậy, bạn phải thêm một lớp mới, như trong ví dụ của tôi được mô tả. Nếu không, bạn sẽ không thấy bất kỳ thay đổi trực quan nào.

Answer 5

Tôi gặp vấn đề tương tự - Tôi muốn định vị một hộp ưa thích theo cách thủ công nhưng nó sẽ tự động căn chỉnh lại.

Tôi giải quyết nó vô hiệu hóa chức năng trung tâm:

$.fancybox.center = function(){}; 

Answer 6

tôi tìm thấy giải pháp này cho fancybox2. Bạn có thể ghi đè phương thức _getPosition mặc định để ngăn chặn một hoặc nhiều thứ nguyên bị thay đổi.

// Disable vertical repositioning 
var orig = $.fancybox._getPosition; 
$.extend($.fancybox, { 
    _getPosition: function(onlyAbsolute) { 
     var rez = orig(onlyAbsolute); 
     delete rez.top; 
     return rez; 
    } 
}); 

Answer 7

Lucas Teixeira đã đúng! Điều này làm việc cho tôi. Trước tiên hãy tắt chức năng trung tâm, sau đó sử dụng sự kiện onComplete để đặt css nội tuyến như bạn muốn.

<script> 
     jQuery(document).ready(function() { 

      //turn off center function 
      $.fancybox.center = function() { }; 

      //use onComplete event to modify inline css 
      $("#ModalPopup").fancybox({ 
       'modal': true, 
       'onComplete': function() { 
        $("#fancybox-wrap").css({ 'left': '250px', 'top': '150px' }); 
       } 
      }); 

     }); 
    </script>