Janelas stilo popup em uma pagina

juliendrio · Abril 29, 2010

Olá galera,

É o seguinte, comecei a mexer com páginas de web a poucos dias e estou tentando entender algo, mas esta difícil, queria fazer várias janelas estilo popup, sendo que cada botão abra uma certa caixa de dialogo, sem ter que criar 4 css e 4 javascript.

Me ajudem, please!!!

<html>
<head>
<title></title>

    <style type="text/css">
        #popup{
    position: fixed;
    top: 30%;
    left: 30%;
    width: 300px;
    height: 150px;
    padding: 20px 20px 20px 20px;
    border-width: 2px;
    border-style: solid;
    background: #ffffa0;
    display: none;
        }
        
        #popup2{
    position: fixed;
    top: 30%;
    left: 30%;
    width: 300px;
    height: 150px;
    padding: 20px 20px 20px 20px;
    border-width: 2px;
    border-style: solid;
    background: #ffffa0;
    display: none;
        }
    </style>
    &lt;script type="text/javascript">
        function fechar(){
            document.getElementById('popup').style.display = 'none';
        }
        function abrir(){
            document.getElementById('popup').style.display = 'block'; ("fechar()");
        }
    </script>
</head>


    <DIV id="popup"> 
    <p>
    Esse é um popup utilizando DIV. popup nº1
    
    </p>
    <p>
        <small><a href="java script: fechar();">[X]</a></small>
    </p>
       </DIV>
    <!----------------->
        <DIV id="popup"> 
    <p>
    Esse é um popup utilizando DIV. popup nº2
    
    </p>
    <p>
        <small><a href="java script: fechar();">[X]</a></small>
    </p>
    </DIV>
 <!--------------------->
<br />
      <a href="java script: abrir();">Abrir POPUP</a>
      </p>
<p><a href="java script: abrir();">Abrir POPUP2</a></p>
<p>Abrir POPUP3</p>
<p>Abrir POPUP4</p>
</body>
</html>

fercosmig · Abril 29, 2010

olha um exemplo ae

function abrir(pagina){

    vURL = pagina;
    vName_Target = pagina;

    vConf = 'top=0, left=0, width='+screen.width+', height='+screen.availHeight;
    vConf += ', channelmode=0, directories=0, fullscreen=0, location=0, menubar=0';
    vConf += ', resizable=1, scrollbars=1, status=0, titlebar=1, toolbar=0';
    
    window.open(vURL,vName_Target,vConf);
}

<a href="java script: abrir('pag1.htm');">Abrir POPUP1</a>
<a href="java script: abrir('pag2.htm');">Abrir POPUP2</a>
<a href="java script: abrir('pag3.htm');">Abrir POPUP3</a>
<a href="java script: abrir('pag4.htm');">Abrir POPUP4</a>

juliendrio · Abril 29, 2010

Queria deixar o conteúdo do popup, incluso no código, já que vai ser poucas palavra, como se fosse uma galeria de fotos, só que com texto, sem abrir uma nova aba do navegador.

Tipo um css que falasse que o bloco tem que aparecer no meio da tela, com "tal" tamanho e cor de fundo ao clicar em uma palavra.

Mas vários desses blocos, sem ter que fazer um css com nome diferente para cada.

Grato pela ajuda e desculpas pela ignorancia com essa linguagem.

Editado Abril 29, 2010 por juliendrio

Entrar

Janelas stilo popup em uma pagina

Pergunta

juliendrio

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

fercosmig

Link para o comentário

Compartilhar em outros sites

juliendrio

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades