If you need to create a popup overlay in html with page scroll support, the following code can accomplish that.
popup_overlay.html:
<html>
<head>
<link href="css/overlay.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script language="javascript">
function DisplayPopupMessage()
{
var docHeight = $(document).height();
var docWidth = $(document).width();
$(".overlay").css({
"height":docHeight,
"width":docWidth
});
var popup = $(".popup");
var center = function () {
var T = $(window).height() / 2 - popup.height() / 2 + $(window).scrollTop();
popup.css({
top: T
});
};
$(window).scroll(center);
$(window).resize(center);
center();
$(".overlay, .popup").fadeToggle();
}
</script>
</head>
<body onclick="DisplayPopupMessage();">
<div class="overlay" style="display:none;"></div>
<div class="popup" style="display:none;"><br/><br/><br/><b>Popup Message</b></div>
normal message
</body>
</html>
overlay.css:
body {
height: 100%;
}
.overlay {
height: 100%;
position:absolute;
display:none;
/* color with alpha transparency */
background-color: rgba(0, 0, 0, 0.7);
/* stretch to screen edges */
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.popup {
position: absolute;
width: 300px;
height: 150px;
display: none;
background-color: white;
text-align: center;
/* center it ? */
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -75px;
}