ऑफ़सेट हाइट और ऑफ़सेट विथथ पहली ऑनक्लिक घटना पर गलत तरीके से गणना कर रहा है, दूसरा

Question

मैंने एक छिपी तत्व प्रदर्शित करने के लिए निम्न स्क्रिप्ट लिखी है, फिर पृष्ठ के केंद्र में इसकी स्थिति ठीक करें।

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"; 
} 

इस समारोह एक onclick घटना से बुलाया जाता है, offsetHeight और offsetWidth गलत तरीके से गणना कर रहे हैं, इस प्रकार सही ढंग से तत्व केंद्रित नहीं। अगर मैं दूसरी बार ऑनक्लिक तत्व पर क्लिक करता हूं, ऑफसेट हाइट और ऑफसेट विड्थ सही ढंग से गणना करता है।

मैंने हर तरह से ऑर्डर बदलने की कोशिश की है, और यह मुझे पागल कर रहा है! किसी भी प्रकार के मदद की बहुत सराहना की जाएगी!

Answer 1

मुझे लगता है कि आपकी ऊंचाई और चौड़ाई माता-पिता पर परिभाषित नहीं है। यह बेवकूफ देखें जहां यह ठीक काम करता है। लड़का मैं स्मार्ट हूँ। http://jsfiddle.net/mrtsherman/SdTEf/1/

ओल्ड उत्तर मैं इस अधिक बस एक बहुत कुछ किया जा सकता है लगता है। आप शीर्ष और बाएं गुणों को 50% पर सेट कर रहे हैं। यह निश्चित तत्व को केंद्र से थोड़ी दूर रखेगा। मुझे लगता है कि आप नकारात्मक मार्जिन का उपयोग करके इसे सही स्थिति में वापस खींचने की कोशिश कर रहे हैं। इसके बजाए - शुरुआत से सही शीर्ष/बाएं मूल्यों की गणना करें और मार्जिन के बारे में चिंता न करें। यहां एक jQuery समाधान है, लेकिन इसे आसानी से सादे जेएस में अनुकूलित किया जा सकता है। मुझे यह भी लगता है कि यदि आपका विंडो स्क्रॉल किया गया है तो आपका वर्तमान कोड काम नहीं करेगा।

//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'); 
});