Div na pagina sobreposta em fundo transparente

[Samuel Pacheco QDS 1]

Pessoal, quero criar uma div, semelhante ao visualizador de fotos do Facebook, como exemplo.

 

Uma div suspensa na pagina, com uma div no fundo com uma imagem png com transparencia.

 

Se puderem me ajudar, ficarei grato.

[EduardoAugustoPHP 27]

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.

[Marcos Xavier 189]

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