Долго сидел ковырялся в коде контакта. Там конечно замучено всё очень и очень детально + поддержка различных устройств. Примерно их идею понял, и вот что у меня получилось:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
var iScrolled = 0;
function window_show() {
iScrolled = $(window).scrollTop();
$(window).scrollTop(0);
$('#container_all').css('position', 'fixed');
$('#container_all').css('margin-top', '-'+iScrolled+'px');
$('#layer_bg').css('display', 'block');
$('#layer').css('display', 'block');
}
function window_hide() {
$('#container_all').css('margin-top', '0px');
$('#container_all').css('position', 'absolute');
$(window).scrollTop(iScrolled);
$('#layer_bg').css('display', 'none');
$('#layer').css('display', 'none');
}
</script>
<style media="all" type="text/css">
/* reset css */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding:0;margin:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img,abbr,acronym {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight:normal;font-style:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;font-size:100%;}
q:before,q:after {content:'';}
#container_all { position:absolute; top: 0; left: 0; width: 100%; z-index: 1; }
#container_content { width:960px; margin:0 auto; border-left:#ccc 1px solid; border-right:#ccc 1px solid; }
#layer_bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 500; overflow: hidden; background: #000; opacity: 0.2; filter: alpha(opacity=20); display: none; }
#layer { position:absolute; top: 0; left: 0; width: 100%; z-index: 600; padding:25px 0; display: none; }
#layer_box { width:600px; margin:0 auto; background:#fff; }
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<div id="container_all">
<div id="container_content" onclick="window_show()">
м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />ам<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />ам<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а
</div>
</div>
<div id="layer_bg"></div>
<div id="layer" onclick="window_hide()">
<div id="layer_box">
м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а<br />м<br />н<br />о<br />г<br />о<br />т<br />е<br />к<br />с<br />т<br />а
</div>
</div>
</body>
</html>
Сразу упомяну: никаких визуальных эффектов не делал.
Прошу, бросайте камни.