Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

marcosfj1

[Resolvido] Criar DIV flutuante(estilo popup) que sobreponha as

Por , em Desenvolvimento frontend

Recommended Posts

marcosfj1    0

marcosfj1
Postado

Seguinte galera recentemente tenho trabalhado com PopUps para mostrar produtos em promocao da minha loja, mas PopUp nao é uma boa pedida já q navegadores e usuarios podem bloquear, entao queria um solução pra isso. A q eu fui atras de tentar fazer sao aquelas janelinhas DIVs q por exemplo qdo entramos no site da globo elas aparecem. Queria fazer uma igual....tentei seguir dois codigos q encontrei na net mas ambos tinham falhas.

 

O primeiro nao apresentava em todos os navegadores

O segundo mostrava na frente da janelinha da DIV uma outra DIV q eu tenho q esta o campo de busca

 

Entao eu queria q mostrasse em todos os navegadores, e q esta DIV(que vai aparecer qdo o cliente logar) ficasse em cima de todos os outro elementos do site

 

Alguem sabe como fazer isso? Se alguem tiver algum codigo por já ter trabalhado com isso, me manda q eu estudo ele e tento adptar ao meu sistema

 

Valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhony ZaM    1

Jhony ZaM
Postado

Ae amigo essa eh facil.

 

cire uma div e defina a class dela como div_teste e adicione o seguinte codigo na pagina

 

.div_teste{
width:200px;
height:100px;
background:#f00;
position:absolute;
z-index:100;
top:30%;
left:40;
}

 

Agora vale a sua criatividade e adaptar ao seu codigo vlw.

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcosfj1    0

marcosfj1
Postado

Poxa cara valeu....pelo q eu testei aqui era isso mesmo q eu queria

 

Cara testei tudo aqui e nao ta completo nao....realmente a DIV aparece na tela, mas como eu posso colcoar a opcao de fechar ela? tipo colocar um X no canto para q ao clicar a div suma

 

Valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhony ZaM    1

Jhony ZaM
Postado

Opa completando meu centesimo post aki...

Cara nem esquenta a vida é assim qualquer coisa posta i fico felix em ajudar

 

abraco

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcosfj1    0

marcosfj1
Postado

Bom cara se você souber como eu posso ter um X na DIV que ao clicar ela desapareca eu agradeco mto...o que eu fiz foi:

 

CSS:

.div_teste{ 
       width:700px; 
       height:500px;  
       position:absolute; 
       z-index:100; 
       top:50px; 
       margin-left:300px; 
}

 

Ai Apos ver q o cara esta logado eu coloquei a DIV que possue uma tabale dentro dela:

<div class="div_teste">
		<table  align ="center" width="700px" HEIGHT="500px" BACKGROUND="img_promocao_hora/<?= $parametro['img_centro_antes'] ?>">
			<tr >
				<td>
					<b><font size="2" face="Verdana" color="#0000FF">Fechar[X]</font></b>
    				</td>
			</tr>
		</table>
	</center>
</div>

 

Agora está é a questao como que eu faço que ao clicar no Fechar[X] a a DIV desapareca....acho q tem q usar tbm JavaScript mas nao sei como

 

Valeu

 

hehe

 

ja consegui

 

 

valeu

 

 

qualquer coisa eu volto aqui pra pedir ajuda, mas parece q o q eu queria já deu certo

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhony ZaM    1

Jhony ZaM
Postado

Ae brother eh simples..

Duas coisas a primeira, coloque um id na div...

Segundo insira uma img ou um button e no onclick coloque o seguinte codigo...

Fix com um button pra voce ver ok.

<input type="buttom" value="Fecha Div" onclick="document.getElementById('id_da_div').style.display = 'none';"/>

 

Testa e me avisa abraco.

Compartilhar este post

Link para o post
Compartilhar em outros sites

- KbeçãO -    0

- KbeçãO -
Postado

olha só...

 

//css
<style>
#pop{
display:none;
position:absolute;
top:25%;
left:auto%;
padding:10px;
width:300px;
height:200px;
border:1px solid #d0d0d0}
</style>

<body>
<div id="pop">
<a href="#" onclick="document.getElementById('pop').style.display='none';">[Fechar]</a>
<br />
Agora coloque oq você quer.

</div>

<a href="#" onclick="document.getElementById('pop').style.display='block';">Mostra</a>
</body>

 

era isso?

agora o codigo a respeito do login vai depender da liguagem que você quer usar...

^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

MAESTROLIM!!!    0

MAESTROLIM!!!
Postado

Podemos reabrir ?

 

Eu pensei em algo, uma DIV abre quando a página é carregada, lentamente, ex: vai empurrando tudo pra baixo, se estiver dentro de uma tabela, e depois de segundos, ela fecha, subindo e voltando tudo ao normal...

 

como ficaria?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhony ZaM    1

Jhony ZaM
Postado

Podemos reabrir ?

 

Eu pensei em algo, uma DIV abre quando a página é carregada, lentamente, ex: vai empurrando tudo pra baixo, se estiver dentro de uma tabela, e depois de segundos, ela fecha, subindo e voltando tudo ao normal...

 

como ficaria?

 

 

Explica melhor, tipo a parte de abrir a div lentamente eh facil, porem nao entendi uma coisa, quando ela é fechada e porque abrir se va fechar???

Compartilhar este post

Link para o post
Compartilhar em outros sites

phlopter    0

phlopter
Postado

olha só...

...

	Agora coloque oq você quer.

</div>

<a href="#" onclick="document.getElementById('pop').style.display='block';">Mostra</a>
</body>

Show cara, muito bom. Eu tentei colocar um botão no lugar de <a href>, mas não deu muito certo, fiz assim:

<button onclick="document.getElementById('pop').style.display='block';">Ok</button>

a div só pisca e some de novo. O que fiz de errado?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito