offsetHeight và offsetWidth tính sai trên sự kiện onclick đầu tiên, không phải thứ hai

Question

Tôi đã viết tập lệnh sau để hiển thị phần tử ẩn, sau đó sửa vị trí của nó thành tâm của trang.

function popUp(id,type) { 
var popUpBox = document.getElementById(id); 

popUpBox.style.position = "fixed"; 
popUpBox.style.display = "block"; 

popUpBox.style.zIndex = "6"; 

popUpBox.style.top = "50%"; 
popUpBox.style.left = "50%"; 

var height = popUpBox.offsetHeight; 
var width = popUpBox.offsetWidth; 
var marginTop = (height/2) * -1; 
var marginLeft = (width/2) * -1; 

popUpBox.style.marginTop = marginTop + "px"; 
popUpBox.style.marginLeft = marginLeft + "px"; 
} 

Khi chức năng này được gọi bởi sự kiện onclick, offsetHeight và offsetWidth được tính không chính xác, do đó không căn giữa phần tử một cách chính xác. Nếu tôi nhấp vào yếu tố onclick lần thứ hai, offsetHeight và offsetWidth tính toán chính xác.

Tôi đã thử thay đổi thứ tự theo mọi cách tôi có thể tưởng tượng và điều này khiến tôi phát điên! Bất kỳ giúp đỡ được rất nhiều đánh giá cao!

Answer 1

Tôi đoán chiều cao và chiều rộng của bạn không được xác định trên cấp độ gốc. Xem fiddle này, nơi nó hoạt động tốt. Cậu bé thông minh. http://jsfiddle.net/mrtsherman/SdTEf/1/

Câu trả lời cũ Tôi nghĩ điều này có thể được thực hiện đơn giản hơn rất nhiều. Bạn đang thiết lập các thuộc tính trên cùng và bên trái đến 50%. Điều này sẽ đặt yếu tố cố định nhẹ ra khỏi trung tâm. Tôi nghĩ rằng bạn đang cố gắng kéo nó trở lại vị trí chính xác bằng cách sử dụng lợi nhuận tiêu cực. Thay vào đó - chỉ cần tính toán các giá trị trên cùng/trái chính xác ngay từ đầu và đừng lo lắng về lợi nhuận. Đây là một giải pháp jQuery, nhưng nó có thể dễ dàng thích nghi với js đồng bằng. Tôi cũng nghĩ rằng mã hiện tại của bạn sẽ không hoạt động nếu cửa sổ đã được cuộn ở tất cả.

//this code will center the following element on the screen 
$('#elementid').click(function() { 
    $(this).css('position','fixed'); 
    $(this).css('top', (($(window).height() - $(this).outerHeight())/2) + $(window).scrollTop() + 'px'); 
    $(this).css('left', (($(window).width() - $(this).outerWidth())/2) + $(window).scrollLeft() + 'px'); 
});