Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Propaganda no meio da tela

marceloths

Perguntado por marceloths,

 Share

Pergunta

marceloths

marceloths

Postado
Postado

Pessoal,

Gostaria de abrir uma janela que aparece no meio da pagina parecido com o site www.bol.com.br . Geralmente é aquela janelinha em flash com a propaganda do anunciante. Gostaria de obter um exemplo de código para abrir aquela janela no site.

Grato, Marcelo.

Link para o comentário
Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

  • 0
Matheus Matos

Matheus Matos

Postado
Postado (editado)

Aew Marcelo! Trouxe a solução!

Enfim quando vi este tópico resolvi te ajudar e começei a pesquisar como eu faria isso, e no final, levou umas duas horas de "serviço" e utilizei apenas DHTML (css, javascript e html), vamos lá:

bloco do css:

#pop_up {
  position: fixed; /* com isso ela vai ficar fixa na tela, independentimente da barra ser rolada */
  top: 50%; /* a margem do topo vai ser 50% do monitor do usuário */
  left: 50%; /* a margem da esquerda vai ser 50% do monitor do usuário */
  height: 200px; /* a altura da div /*
  width: 200px; /* a largura da div */
  margin-top: -100px; /* aqui você tem que colcar a metade da altura */
  margin-left: -100px; /* e aqui a metade da largura; se não fizer isso não vai ficar no centro, se quiser saber mais, fala q eu te explico */
  background: #FF0000; /*  cor do back? Lógico! */
  z-index: 1000; /* z-index é uma espécie de camada, coloquei um número bem alto */
}
no html 
<html>
<head>
<title>Testando Pop_UP</title>

&lt;script type="text/javascript">
function ocultar(pop_up) {
    if(document.getElementById(pop_up).style.display=="none") {
        document.getElementById(pop_up).style.display = "inline";
    }
    else {
        document.getElementById(pop_up).style.display = "none";
    }
}
</script>
</head>
<body>
<div id="pop_up" style="display:hiden" >Coloca o que quiser dentro da div!<br><a href="#" onclick="java script: ocultar('pop_up');">Link para fechar da div</a></div>

<!-- a partir daqui já é o teu site normalmente -->
</body>
</html>

bem, eu ia fazer no photoshop, mas deu problema aqui e tenho que reinstalar... enfim fiquei @#%$@# da vida!

se quiser ajuda para fazer uma borda com o botão de fechar no photoshop, basta ir ao nosso fórum de photoshop e criar um novo tópico que lá tem gente capacitada para te ajudar e responder suas dúvidas...

enfim, se quiser ver logo como ficou, eu fiz uma página html com o css nela mesma, basta ir até essa página e copiar o código-fonte dela => é que fui colocar aqui e aí o fórum coloca outros caracteres e pode não dar certo... o importante é tu enteder, com o código que tem lá na página tu faz tranquilo!

é.... espero (e acho) ter ajudado você..

Responde aí para falar o que achou! :unsure:

Vlw

Matheus Matos

Editado por Matheus Matos
Link para o comentário
Compartilhar em outros sites
  • 0
marceloths

marceloths

Postado
  • Autor
Postado

Matheus,

Eu inseri o código no site www.thsprovider.com.br que está quaseeeeeeeeeee funcionando. Faltando somente fechar a div através do código java script. Não sei que você poderia testar e tentar descobrir aonde está o erro, pois eu tentei identificar o motivo de não fechar a div, mas ainda não descobri. Uma outra coisa: se eu deixar essa div no meio da página, a animação em flash "come" parte dessa div. É possível deixar a animação em flash por baixo da div?

Grande abraço e tenha um ótimo domingo.

Marcelo.

Link para o comentário
Compartilhar em outros sites
  • 0
marceloths

marceloths

Postado
  • Autor
Postado

Já resolvi a parte de deixar o div por cima da animação em flash apenas acrescentando o código no CSS: 

overflow: auto;
Veja o código completo: 
#pop_up {
  position: fixed; /* com isso ela vai ficar fixa na tela, independentimente da barra ser rolada */
  top: 50%; /* a margem do topo vai ser 50% do monitor do usuário */
  left: 45%; /* a margem da esquerda vai ser 50% do monitor do usuário */
  height: 200px; /* a altura da div */
  width: 400px; /* a largura da div */
  margin-top: -100px; /* aqui você tem que colcar a metade da altura */
  margin-left: -200px; /* e aqui a metade da largura; se não fizer isso não vai ficar no centro, se quiser saber mais, fala q eu te explico */
  background: #FF0000; /*  cor do back? Lógico! */
  z-index: 1000; /* z-index é uma espécie de camada, coloquei um número bem alto */
  overflow: auto;
}

Agora só falta fechar a bendita DIV.

Alguém aqui poderia me ajudar.

Grande abraço,

Marcelo

Link para o comentário
Compartilhar em outros sites
  • 0
marceloths

marceloths

Postado
  • Autor
Postado

Ufa!! Depois que o Matheus mostrou o caminho certo. Consegui resolver meu problema. Modifiquei um pouco o código:

Veja o código completo abaixo para exibir uma propaganda parecido com a do site www.bol.com.br:

CSS:

#pop_up {
  position: fixed; /* com isso ela vai ficar fixa na tela, independentimente da barra ser rolada */
  top: 50%; /* a margem do topo vai ser 50% do monitor do usuário */
  left: 45%; /* a margem da esquerda vai ser 50% do monitor do usuário */
  height: 200px; /* a altura da div */
  width: 400px; /* a largura da div */
  margin-top: -100px; /* aqui você tem que colcar a metade da altura */
  margin-left: -200px; /* e aqui a metade da largura; se não fizer isso não vai ficar no centro, se quiser saber mais, fala q eu te explico */
  background: #FF0000; /*  cor do back? Lógico! */
  z-index: 1000; /* z-index é uma espécie de camada, coloquei um número bem alto */
  overflow: auto;
}
HTML: 
<html><head><title>Teste Fechar DIV</tittle></head>
<body>
<div id="pop_up"><a href="java script:void(0)" onclick="document.getElementById('pop_up').style.display ='none';">Fechar</a></div>
</body>
</html>

Grande abraço e especialmente ao Matheus que me ajudou,

Marcelo.

Link para o comentário
Compartilhar em outros sites
  • 0
Matheus Matos

Matheus Matos

Postado
Postado

opa marcelo... aqui em casa funcionou... mas já descobri o que foi... é que o fórum modificou o código fonte... ele separou o javascript e ficou java script...

só é tu juntar, o nome certo é: javascript e não java script

tenta juntar lá, se não der certo, volta aqui que eu hospedo a página e aí tu salva!

há! e obrigado pelo "tenha um ótimo domingo"! => pra você também!

obs: vi lá no site quando a div chega na parte da animação em flash, ela fica por trás. Para resolver isso coloque a animação em flash dentro de uma div e dê a ela um z-index menor do que a div do pop_up, assim:

.div_do_flash {
  z-index: 1;
}

.div_do_pop_up {
  z-index: 2;
}

há! E pode tirar os comentários do css se quiser...

Vlw

Matheus Matos

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...