I am facing an issue with centering a pop-up box perfectly within the window using CSS properties. The code for the pop-up box styling is as follows:
#pop_up {
position: fixed;
display: inline-block;
border: 2px solid green;
box-shadow: 0px 0px 8px 5px white;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
border-radius: 5px;
background-color: grey;
}
Additionally, I have implemented some jQuery functions to set the left and top properties of this element.
$(document).ready(function() {
window_height = $(window).height();
window_width = $(window).width();
pop_up_height = $('#pop_up').outerHeight();
pop_up_width = $('#pop_up').outerWidth();
pop_up_left = (window_width / 2) - (pop_up_width / 2);
pop_up_top = (window_height / 2) - (pop_up_height / 2);
$('#pop_up').css('left', pop_up_left);
$('#pop_up').css('top', pop_up_top);
});
During testing, I noticed that the variables for pop_up_height and pop_up_width were indicating values of '4', which indicates it's only capturing the border. Changing it to .innerHeight(); and .innerWidth(); returns '0'. This suggests that it retrieves the width before the browser applies the width: max-content; property adjustment. I am seeking a solution to account for the width after this browser rendering process.
Furthermore, when setting a left value for positioning, does it reference the border or the actual interior of the element? In other words, if an element has a 2px border and is positioned at left: 20px, will the distance be from the border or the inner content edge?