Div na pagina sobreposta em fundo transparente

Amigo, o negócio é utilizar a jQuery para você ter esses efeitos.

Dê uma olhada nisso:

<script type="text/javascript">
$(document).ready(function() {//não é necessário se você imbutir o código ao fim da página html.

//seleciona os elementos a com atributo name="modal"
$('a[name=modal]').click(function(e) {
//cancela o comportamento padrão do link
e.preventDefault();

//armazena o atributo href do link
var id = $(this).attr('href');

//armazena a largura e a altura da tela

var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Define largura e altura do div#mask iguais ás dimensões da tela
$('#mask').css({'width':maskWidth,'height':maskHeight});

//efeito de transição

$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);

//armazena a largura e a altura da janela

var winH = $(window).height();
var winW = $(window).width();

//centraliza na tela a janela popup

$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);

//efeito de transição

$(id).fadeIn(2000);
});

//se o botãoo fechar for clicado
$('.window .close').click(function (e) {
//cancela o comportamento padrão do link

e.preventDefault();
$('#mask, .window').hide();
});

//se div#mask for clicado

$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>

3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- #dialog é o id do DIV definido como mostrado a seguir -->

<a href="#dialog" name="modal">Janela Modal Simples</a>

<div id="boxes">

 <!-- #personalize sua janela modal aqui -->

 <div id="dialog" class="window">
 <b>Teste de Janela Modal</b>

 <!-- Botão para fechar a janela tem class="close" -->
 <a href="#" class="close">Fechar [X]</a><br /><br>Janela Modal Simples<br />
 Aqui vai o conteúdo da sua Janela Modal Simples.<br />
 </div>

 <!-- Não remova o div#mask, pois ele é necessário para preencher toda a janela -->
 <div id="mask"></div>
</div>

<style>/* O z-index do div#mask deve ser menor que do div#boxes e do div.window */
#mask {position:absolute;
z-index:9000;
background-color:#000;
display:none;
}

#boxes .window {

position:absolute;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}

/ Personalize a janela modal aqui. Você pode adicionar uma imagem de fundo. /
#boxes #dialog {

width:375px;
height:203px;
</style>
}

/ posiciona o link para fechar a janela /

.close {
display:block;
text-align:right;
}
</style>

É só você se divertir agora meu amigo...

Dei uma vasculhada no código e consegui na seguinte fonte (que sigo faz tempo e ajuda bastante) http://www.rhodesign.com.br/blog/janela-modal-com-jquery-lightbox-para-pagina-html-e-imagens/

Se ainda tiver dúvidas, dá uma olhada no site.

Um abraço e boa sorte.

https://www.google.com.br/search?q=plugin+ligth+box&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:pt-BR:official&client=firefox-a#hl=pt-BR&client=firefox-a&hs=gXX&rls=org.mozilla:pt-BR:official&spell=1&q=plugin+lightbox&sa=X&ei=XCAmUY_iKIKy9gT5-oGQDA&ved=0CC4QvwUoAA&bav=on.2,or.r_gc.r_pw.r_qf.&bvm=bv.42661473,d.eWU&fp=c093e30f44a705e6&biw=1024&bih=626'>

Veja aqui