Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
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
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>
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
Estou tentando por aqui, novidades eu vou postando.
O que faz a propriedade childNodes[0] ?
Obrigado
>
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.
http://www.lokeshdhakar.com/projects/lightbox2/