Primarily, this is CSS focused to be completely transparent.
Check out this demo: http://jsfiddle.net/ktd29/11/
I've developed a rather mediocre lightbox mimicking the style of Facebook. The red square signifies the image and the black area represents the semi-transparent overlay.
You'll see that the main content can be scrolled until you click the link, at which point the scroll bar will be disabled.
The semi-transparent overlay is positioned absolutely with 100% width and height:
div {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.7);
overflow-y: scroll;
display: none;
}
A key detail about this div is that the overflow-y property is set to scroll, meaning a scrollbar will always appear regardless of actual scrollability.
The document's height is intentionally set very high so that when the lightbox isn't in view, the page remains scrollable. Here is how to trigger the lightbox:
jQuery(document).ready(function($) {
$('a').click(function(){
$('div').addClass('shown');
$('html').addClass('noScroll');
});
});
This behaves as expected. The "shown" class is added, essentially just setting display: block;. Pay attention to the "noScroll" class applied to HTML, which sets overflow-y: hidden; and removes the original scrollbar. This prevents the presence of two scrollbars (one for HTML and one for the overlay div).
Let me know if you need further explanation.