AJAX Modal Box Positioning

Hey guys, I'm learning how to validate a form field using Javascript/PHP being passed asynchronously.

However, I'm stuck with trying to position the modal box in the center of the screen. With the following code, it positions the modal box too far down, and too far from the left:

function overlay() {
	
	var modal_window = document.getElementById("modal_window");
	var modal_background = document.getElementById("modal_background");
	
	var windowHeight = window.innerHeight;
	var windowWidth = window.innerWidth;
	
	var divHeight = modal_window.clientHeight;
	var divWidth = modal_window.clientWidth;
	
	modal_window.style.top = (windowHeight/2) - (divHeight/2) + "px";
	modal_window.style.left = (windowWidth/2) - (divWidth/2) + "px";
}

Code (markup):

Any thoughts of how I can improve this bit of code or how to accurately calculate the center of any browser window.

Thanks guys!

 

you can view source code of scripts below for your problem:

- Center Window in all resolutions and Alway on Top
- Content Center