Ir para conteúdo

POWERED BY:

Arquivado

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

Leonardo Joksan

[Resolvido] Janelas z-index, nas janelas.

Por , em Javascript

Recommended Posts

Leonardo Joksan    0

Leonardo Joksan
Postado

Bom, tenho um sistema, onde ele abre as janelas, para as funções.

 

bom criei, todas as funções dela, de mover e etc.

 

agora meu problema está cendo, quando abre a primeira ela sempre fica na frente das outras, como posso colocar para quando clicar nas outras ir para frente?

 

seria onClick? e depois quando da onClick da outra não seria mesma coisa...

 

como poderia ser feito?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ismaeldm    5

Ismaeldm
Postado

A resposta não está na sua pergunta? :mellow:

Basta utilizar z-index, aí ao clicar na caixa o z-index dela fica com 1, e as outras ficam com 0. Isso é um exemplo...

Eu na verdade não sei muito sobre javascript puro, só sei mesmo mecher com JQuery >.<

Se você quiser utilizar JQuery para isso você faz o seguinte...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style>
div {width:100px; height:100px; float:left; position:absolute;}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
 $('div').click(function(){
   $('div').css('z-index', '0');
   $(this).css('z-index', '1');
 });
});
</script>
</head>
<body>
<div style="background-color:#000;"></div>
<div style="background-color:#999; margin:20px;"></div>
<div style="background-color:#444; margin:40px;"></div>
<div style="background-color:#777; margin:60px;"></div>
</body>
</html>

 

Funciona perfeitamente (:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leonardo Joksan    0

Leonardo Joksan
Postado

Até ai tudo bem, mais quando você clica em uma, volta para a outra e depois tenta clicar em uma novamente, ela fica no fundo, pois por utimo foi acrescentado z-index: 1 na primeira.

 

teria que ser uma forma, else if, para ele verificar, se uma for ativa ele aplica z-index 1 e caso a mesma for desativa ele aplica z-index 0

 

seria mais ou menos isso.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ismaeldm    5

Ismaeldm
Postado

Você testou o HTML que te enviei?

Só se eu não estou te entendendo, porque aqui funcionou normalmente, clica na 4° DIV, clica na 1°, clica na 4° denovo, clica na 3°, 2°, 4°, 1°, 2°... Sempre vai normal, e sem precisar atualizar a pagina...

Veja o código, ele acrescente z-index 0 em TODAS as div, e depois ele acrescenta z-index 1 APENAS NA CLICADA...

Não é isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leonardo Joksan    0

Leonardo Joksan
Postado

Você testou o HTML que te enviei?

Só se eu não estou te entendendo, porque aqui funcionou normalmente, clica na 4° DIV, clica na 1°, clica na 4° denovo, clica na 3°, 2°, 4°, 1°, 2°... Sempre vai normal, e sem precisar atualizar a pagina...

Veja o código, ele acrescente z-index 0 em TODAS as div, e depois ele acrescenta z-index 1 APENAS NA CLICADA...

Não é isso?

 

Muito obrigado!!!!!

 

perfeito, testei certinho e funciono.

 

Erro era: minhas nelas era nomes diferentes de várias divs, e dentro do site tinha divs, ou seja, não poderia colocar nome de div, então mudei para nome das divs separadas com virgulas, ou seja está 100% agora.

 

muito obrigado pela ajuda!

Compartilhar este post

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

Informação importante

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

  Aceito