Lightbox

[filipescoob 1]

Caros bom dia,

 

Um salve de ano novo a toda comunidade...

 

Sou programador e venho notando que a nova tendencia do mercado é que em vez de pop up nos sistemas estão sendo usados janelas estilo lightbox com fundo esmaecido de modo que o usuario nao consiga clicar no que esta atraz.

 

Alguem tem um exemplo de um site que mostre como trabalhar com esta tecnologia ? Um exemplo de codigo ou até mesmo por qual topico devo procurar no google para buscar exemplos e estudar ?

 

Fico no aguardo

 

Obrigado

[Evandro Oliveira 331]

http://www.lokeshdhakar.com/projects/lightbox2/

[filipescoob 1]

Evandro

 

Não expliquei direito o que preciso, peço desculpas.

 

Preciso desta tecnologia (a mesma do link que passou) porem em vez de carregar a foto, carregar conteudo web, uma tela, um form ou apenas em foma de pop up.

 

Conseguiu captar o que preciso, tipo o site do ponto frio, tudo que se clica nao abre pop up mas sim algo do tipo.

 

Obrigado

[Evandro Oliveira 331]

a parte de CSS consiste em fazer o fundo 'fumê' e o conteúdo a ser exibido através das propriedades position e z-index

 

<div id='modal'>
<div>
aqui vem o conteúdo
</div>

 

#modal {
   background: url('fume.png');
   bottom: 0;
   display: none;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
}

 

Quando precisar exibir/ocultar, utilize javascript:

 

var modal = document.getElementById('modal');
var cont = modal.childNodes[0];
cont.innerHTML = 'Conteúdo da janela modal';
modal.style.display = 'block'; // esta linha exibe
modal.style.display = 'none'; // esta linha oculta

[filipescoob 1]

a parte de CSS consiste em fazer o fundo 'fumê' e o conteúdo a ser exibido através das propriedades position e z-index

 

<div id='modal'>
<div>
aqui vem o conteúdo
</div>

 

#modal {
   background: url('fume.png');
   bottom: 0;
   display: none;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
}

 

Quando precisar exibir/ocultar, utilize javascript:

 

var modal = document.getElementById('modal');
var cont = modal.childNodes[0];
cont.innerHTML = 'Conteúdo da janela modal';
modal.style.display = 'block'; // esta linha exibe
modal.style.display = 'none'; // esta linha oculta

 

 

Evandro

 

No cont.innerHTML = 'Conteudo da Janela Modal', neste campo vai o HTML correto ? tem um exemplo de como apresenta-lo ? Existe um meio de chamar um link de fora da pagina ?

 

Segue o que entendi, por favor me diga se esta correto...

 

cont.innerHTML = '<table><tr><td>Coluna 1</td><td>Coluna 2</td></tr></table>'; ???

 

 

var modal = document.getElementById('modal');
var cont = modal.childNodes[0];
cont.innerHTML = '<table><tr><td>Coluna 1</td><td>Coluna 2</td></tr></table>';
modal.style.display = 'block'; // esta linha exibe
modal.style.display = 'none'; // esta linha oculta

 

Fico no aguardo e agradeço pela atençao ao meu problema.

 

filipescoob

[filipescoob 1]

Estou tentando por aqui, novidades eu vou postando.

 

O que faz a propriedade childNodes[0] ?

 

Obrigado

[Evandro Oliveira 331]

No cont.innerHTML = 'Conteudo da Janela Modal', neste campo vai o HTML correto ? tem um exemplo de como apresenta-lo ? Existe um meio de chamar um link de fora da pagina ?

 

Segue o que entendi, por favor me diga se esta correto...

 

cont.innerHTML = '<table><tr><td>Coluna 1</td><td>Coluna 2</td></tr></table>'; ???

 

Perfeitamente. Para apresentar conteúdo de fora da página, será necessário um iframe.

 

Estou tentando por aqui, novidades eu vou postando.

 

O que faz a propriedade childNodes[0] ?

 

Obrigado

 

childNodes retornas os nós (nodes) filhos (child) do elemento em questão. Em javascript, listas começam no índice 0. Portanto, queremos o primeiro nó filho do elemento modal, ou seja, a div que será responsável por apresentar o conteúdo.