что-то типа такого
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://jsfiddle.net/js/lib/mootools-core-1.3.1-full-nocompat.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">
body, html {
padding: 0;
margin: 0;
}
.bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background: #000;
overflow: auto;
}
.wrapper {
padding: 100px;
}
.content {
width: 1000px;
height: 1000px;
background: url(http://placekitten.com/1000/1000);
}
</style>
content
<a id="link" href="#">lightbox</a>
<script type="text/javascript">
$('link').addEvent('click', function(){
$$('html, body').setStyle('overflow', 'hidden');
new Element('div', {'class': 'bg', 'html':
'<table><tr><td class="wrapper"><div class="content"></table></div>'
})
.inject(document.body);
});
</script>
</body>
</html>