www.tuljo.com

Center popup jQuery

Center a popup in the middle of browser viewport

Center popup jQuery also fixes the position fixed for IE6 and makes the page scrollable for IE6.

Sample of Center popup jQuery

HTML markup for Center popup jQuery

<div class="centerPopup">
	.centerPopup - centered by width and height of browser viewport
</div>

CSS style for Center popup jQuery

<style type="text/css">
	.centerPopup{
		background:#dee;
		display:inline;/*IE6*/
		float:left;
		height:100px;
		position:fixed;
		width:auto;/*can be % px auto*/
		z-index:200;
	}
</style>

<!-- fixing position fixed for IE6, making page scrollable for IE6 -->
<!--[if lte IE 6]>
	<style type="text/css">
	/*<![CDATA[*/
		html{
			overflow-x:auto;
			overflow-y:hidden;
		}
		body{
			height:100%;
			overflow-y:auto;
		}
		*html .centerPopup{
			position:absolute;
		}
	/*]]>*/
	</style>
<![endif]-->
<!-- END fixing position fixed for IE6, making page scrollable for IE6 -->

jQuery code for Center popup jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

<script type="text/javascript">
$(function centerPopup(){
	$('.centerPopup').each(function(){
		$(this).css('left',($(window).width()-$(this).outerWidth())/ 2 + 'px');
		$(this).css('top',($(window).height()-$(this).outerHeight())/ 2 + 'px');
	});
});
</script>

2011

Web Development - XHTML CSS JavaScript jQuery.