[SOLVED] Center a popup div (horizontally and vertically)

c_shelswell · July 19, 2009

Hi I've got a bit of code that seems to work fine in another site i've made but I can't seem to integrate it to a new site I'm working on. I had initially copied the code so I could have missed something.

When a user clicks the link (in this case "test") the popup div should center itself vertically on the page. It seems to be horizontally doing it just fine. The function that should achieve this is "centerPopup". I've pasted all the code below this should be able to be loaded in to a browser fully. Can anyone see where i'm going wrong?

Many thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

		<head>
			<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

			<style type="text/css">
			#popupBackground{
			display:none;
			position:fixed;
			_position:absolute; /* hack for internet explorer 6*/
			height:100%;
			width:100%;
			top:0;
			left:0;
			background:#000000;
			border:1px solid #cecece;
			z-index:1;
		}
		#popupForm{
			display:none;
			position:fixed;
			_position:absolute; /* hack for internet explorer 6*/
			height: 200px;
			width:200px;
			background:#000;
			border:1px solid #555;
			z-index:2;
			padding:5px;
		}
		</style>
	<title>TEST</title>
		</head>
	<body>

<script type="text/javascript">
$(document).ready(function()
{
var popupStatus = 0;

function loadPopup()
{

	if(popupStatus==0)
	{
		$("#popupBackground").css(
		{
			"opacity": "0.5"
		});
		$("#popupBackground").fadeIn("slow");
		$("#popupForm").fadeIn("slow");
		popupStatus = 1;
	}

}

function disablePopup()
{
	if(popupStatus == 1)
	{
		$("#popupBackground").fadeOut("slow");
		$("#popupForm").fadeOut("slow")
		popupStatus = 0;
	}
}

function centrePopup()
{
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;

	var popupHeight = $("#popupForm").height();
	var popupWidth = $("#popupForm").width();

	$("#popupForm").css(
	{
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});

	$("#popupBackground").css({
		"height": windowHeight
	});
}

$(".popupClick").click(function()
{
	$("#popupForm").append("Got it");
	centrePopup();
	loadPopup();
});

$("#closePopup").click(function()
{
	disablePopup();
});

$("#popupBackground").click(function()
{
	disablePopup();
});

$(document).keypress(function(e)
{
	if(e.keyCode==27 && popupStatus==1)
	{
		disablePopup();
	}
});

});


</script>

<div class='title'></div>
<h1>NEWS ITEMS </h1>


<table id="table-1" cellspacing="4" cellpadding="4" border='0' width='100%'>
<tr>
	<td style='border: 1px solid #333;' valign='top' height="100px">
		<a href='#nogo' class="popupClick">Test</a>
	</td>
</tr>
<tr>
	<td style='border: 1px solid #333;' valign='top' height="100px">
		<a href='#nogo' class="popupClick">Test</a>
	</td>
</tr>
<tr>
	<td style='border: 1px solid #333;' valign='top' height="100px">
		<a href='#nogo' class="popupClick">Test</a>
	</td>
</tr>
<tr>
	<td style='border: 1px solid #333;' valign='top' height="100px">
		<a href='#nogo' class="popupClick">Test</a>
	</td>
</tr>
<tr>
	<td style='border: 1px solid #333;' valign='top' height="100px">
		<a href='#nogo' class="popupClick">Test</a>
	</td>
</tr>
<tr>
	<td style='border: 1px solid #333;' valign='top' height="100px">
		<a href='#nogo' class="popupClick">Test</a>
	</td>
</tr>
<tr>
	<td style='border: 1px solid #333;' valign='top' height="100px">
		<a href='#nogo' class="popupClick">Test</a>
	</td>
</tr>
</table>

<div id="popupForm"></div>
<div id='popupBackground'></div>

	</body>
</html>

c_shelswell · July 21, 2009

Ok i'm getting this a little better. But does anyone know a way to get it to focus on the centre of the screen even if the page is scrolled down?

Cheers

haku · July 22, 2009

I'm not sure if this will work when combined with the javascript, but try adding this CSS in your javascript function:

position:fixed;

I think it should work.

c_shelswell · July 22, 2009

Mate you are fantastic!! Thank you so much. Was so annoyingly simple too!

Sign In

[SOLVED] Center a popup div (horizontally and vertically)

Recommended Posts

c_shelswell

Link to comment

Share on other sites

c_shelswell

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

c_shelswell

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information