[Resolvido] Pop-up dinâmica

[Zanotta 0]

Então galera, criei esta simples tabela periódica: http://cstsi.ifsul.edu.br/lpw/Zanotta/tabela/

 

Eu queria criar pop-ups, por exemplo, o usuário clica em um elemento, e aparece uma janela com suas respectivas propriedades.

 

Ja achei uma maneira de criar, porem só serve para uma mesma div. Eu gostaria de criar mais dinamicamente, cada elemento, quando clicado, abriria sua respectiva janela.

 

Alguem pode me dar uma luz de como começar?

 

Este é o método que comentei, serve perfeitamente, se fosse apenas uma pop-up.

 

<script language="javascript">

function fechar(){
document.getElementById('popup').style.display = 'none';
}
function abrir(){
document.getElementById('popup').style.display = 'block';
setTimeout ("fechar()", 3000);
}
</script>

<div id="popup" class="popup">
<b> Web tecnology </b>
<p>
Esse é um exemplo de popup utilizando DIV. Dessa maneira esse
pop-up não será bloqueado.
</p>
<small><a href="javascript: fechar();">X ou fechar</a></small>
</div>
<br> <a href="javascript: abrir();">Abrir Pop-up</a>
<br> <a href="javascript: fechar();">Fechar Ppo-up</a>

 

Grato pela atenção.

[William Bruno 1501]

Para tornar este mais 'dinamico', use argumentos na função

 

<script type="text/javascript">

function fechar( id_div ){
  document.getElementById( id_div ).style.display = 'none';
}
function abrir( id_div ){
  document.getElementById( id_div ).style.display = 'block';
  window.setTimeout( fechar, 3000, id_div );
}
</script>

<div id="popup" class="popup">
<b> Web tecnology </b>
<p>
Esse é um exemplo de popup utilizando DIV. Dessa maneira esse
pop-up não será bloqueado.
</p>
<small><a href="javascript: fechar('popup');">X ou fechar</a></small>
</div>
<br> <a href="javascript: abrir('popup');">Abrir Pop-up</a>
<br> <a href="javascript: fechar('popup');">Fechar Ppo-up</a>

 

E então para as próximas:

<a href="javascript: abrir('popup2');">Abrir Pop-up</a>

e assim em diante.

[Zanotta 0]

Perfeito William, perfeito, muito obrigado pela ajuda. :)