Pop up box for displaying messages over a page

popUp.php

<div id="overlay">
	<div id="messageBox"></div>	
</div>	

<script type="text/javascript">
function popUp(message) {
	document.getElementById("overlay").style.visibility = "visible";
}

function closePopUp() {
	document.getElementById("overlay").style.visibility = "hidden";
}
</script>

style.css

#overlay {
	visibility: hidden;
	position: absolute;
	left: 0px;
	top: 0px;
	width:100%;
	height:100%;
	text-align:center;
	z-index: 1000;
}

#overlay div {
	width:300px;
	margin: 400px auto;
	background-color: rgb(120,120,120);
	background-color: rgba(120,120,120,0.7);
	padding:15px;
}