Centered Modal Window Panel

screen-panel.html

<script>
$(function (){

	//TRACK SCREEN-SIZE & CREATE OBJECT FIX POSITION
	var sp = $('.popup-element'),
		winWidth = $('#screen-panel').width() / 2 - sp.width() / 2,
		winHeight = $('#screen-panel').height() / 2 - sp.height() / 2;

	//CHECK IF THE WIDTH & HEIGHT IS DIVIDING THE SCREEN-SIZE
	console.log(winWidth, winHeight);

	//CREATE THE TRIGGER TO POPUP THE SCREEN-PANEL
	$(document).ready(function(){
		$('#screen-panel').fadeIn(200, function(){
			sp.fadeIn(500);
		});
		sp.css('left', winWidth);
		sp.css('top', winHeight);
	});

	//CLOSE BUTTON FOR SCREEN-PANEL
	$('span.close').on('click', function(){
		sp.fadeOut(200, function(){
			$('#screen-panel').fadeOut();
		});
	});
};
</script>

<style>
#screen-panel { position: fixed; top: 0; left: 0; display: none; background: rgba(0,0,0,.50); width: 100%; height: 100%; z-index: 1000; }
#screen-panel .popup-element { position: absolute; display: none; background: #FFF; width: 1080px; height: 500px; padding: 10px 0; border-radius: 5px; box-shadow: 0 0 0 10px rgba(0,0,0,.50); z-index: 1000; }
#screen-panel .popup-element .close { position: absolute; top: 10px; right: 10px; display: block; text-align: right; width: auto; height: 10px; cursor: pointer; }
#screen-panel .popup-element .close:after { content: "\00d7"; }
</style>

Creating centered modal window screen in your web page using jQuery codes