Ir para conteúdo

Arquivado

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

Carcleo

funcão não funciona

Por , em Javascript

Recommended Posts

Carcleo    4

Carcleo
Postado

Pessoal,

Essa função fechar não fecha a div:

  <html>
    <head>
<title>Bem Vindo</title>
<style type="text/css">
       .entrada
    {
      top: 0;
          left:0;
      width:100%;
      height:100%;
      position: absolute;
      background-color: #000;
      opacity: .8;
        }

  img#banner
    {  
  width: 300px;
           position: absolute;
           top: 50%;
  margin-top:-150px;
           left: 50%;
  ;
           border: 0;
         }
       img#fechar
    {  
  width: 50px;
           position: absolute;
           top: 50%;
  margin-top:-194px;
           left: 50%;
  margin-left: 100px;
           border: 0;
         }
      </style>
<script>
  function fechar(div)
       {
          document.getElementById(div).style.display = "none";
       }
</script>
    </head>

<body>
       <img src="aa.jpg" />
       <div class="entrada">
    <a href="../eleicoes2014"><img src="bannerClique.jpg" id="banner" /></a>
<img src="aa.jpg" id="fechar" onclick="fechar('entrada')" />
  </div>
</body>
</html>

Onde esta meu erro?

 

A ideia é fazer uma div que sobreponha o site com fundo opaco e que tenha uma imagem bem ao centro da tela.
Também é necessário colocar um botão fechar no canto superior direito da imagem (400px X 400px) para que o usuário possa fechar a div.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Acabou de testar isso.

 

Continua dando mesmo erro

 

 

  <html> 
    <head> 
 <title>Bem Vindo</title> 
 <style type="text/css">
       #entrada
    {
      top: 0;
          left:0;
      width:100%;
      height:100%;
      position: absolute;
      background-color: #000;
      opacity: .8;
        }
 
  img#banner 
    {  
  width: 300px;
           position: absolute;
           top: 50%;
  margin-top:-150px;
           left: 50%;
  ;
           border: 0;
         }
       img#fechar 
    {  
  width: 50px;
           position: absolute;
           top: 50%;
  margin-top:-180px;
           left: 50%;
  margin-left: 125px;
           border: 0;
         } 
      </style>
 <script>
  function fechar(div)
       {
          document.getElementById(div).style.display = "none";
       }
 </script>
    </head> 
 
<body> 
       <img src="aa.jpg" />
       <div id="entrada">
    <a href="../eleicoes2014"><img src="bannerClique.jpg" id="banner" /></a>
<img src="fechar.png" id="fechar" onClick="fechar('entrada');" />
  </div>
</body> 
</html>

Não será porque o botão de fechar esta dentro da própria div?


Hum, rodei no internet explorer e ele bloqueou o JavaScript, liberei o JavaScript e funcionou.

 

Mas no chrome só diz que "undedined is not a funtion"

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leonardo Silva_109261    6

Leonardo Silva_109261
Postado

Retire a imagem fechar de dentro da div entrada e coloque ela dentro de uma div, por exemplo:

<div id='fechar'><img src="fechar.png" id="fechar" onClick="fechar('entrada')" /></div>

O que acontece é que você não está conseguindo clicar na imagem de fechar, para você testar se quiser cria uma função chama alerta com um alert e chame ela no onClick da imagem, vai ver que não ira funcionar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Sim. Mas note que tenho duas imagens dentro da div entrada.

 

Um botão fechar com onClick e um banner com um href.

 

O banner clika normal mas o botão não.

 

O que mais me intriga é que o Internet Explorer bloqueia o JavaScript e me permite desbloquear, desbloqueando, a função funciona. Ou seja, estou conseguindo clickar no botão. Ou não?

 

Já no chrome não funciona o botão nem bloqueia o JavaScript. Mas o href funciona'


Outra coisa, se eu criar outra div fora da entrada, como a entrada pega 100% do browser, essa div não estará disponível.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leonardo Silva_109261    6

Leonardo Silva_109261
Postado

Tente inverter a ordem então do script, coloque a imagem de fechar acima do código do banner.

 

Exemplo:

<img src="fechar.png" id="fechar" onClick="fechar('entrada');" />
<a href="../eleicoes2014"><img src="bannerClique.jpg" id="banner" /></a>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Criei a div fora e nem o alert que puz funcionou.

 

  <html> 
    <head> 
 <title>Bem Vindo</title> 
 
 <script>
  function fechar(div)
       {
    alert(div);
          document.getElementById(div).style.display = "none";
       }
 </script>
 <style type="text/css">
       #entrada
    {
      top: 0;
          left:0;
      width:100%;
      height:100%;
      position: absolute;
      background-color: #000;
      opacity: .8;
        }
 
  img#banner 
    {  
  width: 300px;
           position: absolute;
           top: 50%;
  margin-top:-150px;
           left: 50%;
  ;
           border: 0;
         }
#fechada
{
  z-index:10;
  width: 50px;
           position: absolute;
           top: 50%;
  margin-top:0px;
           left: 50%;
  margin-left: 0px;
           border: 0;
}
       img#fechar 
    {  
  z-index:1;
  width: 50px;
           position: absolute;
           top: 50%;
  margin-top:-180px;
           left: 50%;
  margin-left: 125px;
           border: 0;
         } 
      </style>
    </head> 
 
<body> 
       <img src="aa.jpg" />
       <div id="fechada">
<img src="fechar.png" id="fechar" width="500px" onClick="fechar('entrada');" />
  </div>
       <div id="entrada">
    <a href="../eleicoes2014"><img src="bannerClique.jpg" id="banner" /></a>
<img src="fechar.png" id="fechar" onClick="fechar('entrada');" />
  </div>
</body> 
</html>

Invertendo também deu na mesma.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leonardo Silva_109261    6

Leonardo Silva_109261
Postado

Eu não sei explicar o porque do erro, porém se você trocar o id de fechada para fechar o código funciona e você também deve tirar a imagem de fechar que está dentro da div entrada.

 

O que está acontecendo é que sua div entrada ou melhor o banner está "sobrepondo" o botão de fechar e por isso você não consegue clicar.

<html> 
    <head> 
 <title>Bem Vindo</title> 
 
 <script>
  function fechar(div)
       {
		  //alert(div);
          document.getElementById(div).style.display = "none";
       }
 </script>
 <style type="text/css">
       #entrada
    {
      top: 0;
          left:0;
      width:100%;
      height:100%;
      position: absolute;
      background-color: #000;
      opacity: .8;
        }
 
  img#banner 
    {  
  width: 300px;
           position: absolute;
           top: 50%;
  margin-top:-150px;
           left: 50%;
  ;
           border: 0;
         }
#fechada
{
  z-index:10;
  width: 50px;
           position: absolute;
           top: 50%;
  margin-top:0px;
           left: 50%;
  margin-left: 0px;
           border: 0;
}
       img#fechar 
    {  
  z-index:1;
  width: 50px;
           position: absolute;
           top: 50%;
  margin-top:-180px;
           left: 50%;
  margin-left: 125px;
           border: 0;
         } 
      </style>
    </head> 
 
<body> 
       <img src="aa.jpg" />
        <div id="fechar">
            <img src="fechar.png" id="fechar" width="500px" onClick="fechar('entrada');" />
        </div>
       <div id="entrada">
    <a href="../eleicoes2014"><img src="bannerClique.jpg" id="banner" /></a>

  </div>
</body> 
</html>S

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado

Buenas tchê.

 

Dá uma olhada aqui (http://codepen.io/marlonlp/pen/HCgqD). Só tive que mudar o nome da função.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Tô tentando até com jquery e nada.

 

  <html> 
    <head> 
 <title>Bem Vindo</title> 
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script>
   $("#fechar").click
  (
    function()
    {
         $("#entrada").style.display = "none";
}
  )
 </script>
 <style type="text/css">
       #entrada
    {
      top: 0;
          left:0;
      width:100%;
      height:100%;
      position: absolute;
      background-color: #000;
      opacity: .8;
        }
 
  img#banner 
    {  
  width: 300px;
           position: absolute;
           top: 50%;
  margin-top:-150px;
           left: 50%;
  ;
           border: 0;
         }
#fechada
{
  z-index:10;
  width: 50px;
           position: absolute;
           top: 50%;
  margin-top:0px;
           left: 50%;
  margin-left: 0px;
           border: 0;
}
       img#fechar 
    {  
  z-index:1;
  width: 50px;
           position: absolute;
           top: 50%;
  margin-top:-180px;
           left: 50%;
  margin-left: 125px;
           border: 0;
         } 
      </style>
    </head> 
 
<body> 
       <img src="aa.jpg" />
       <div id="fechada">
<img src="fechar.png" id="fechar" width="500px"" />
  </div>
       <div id="entrada">
    <a href="../eleicoes2014"><img src="bannerClique.jpg" id="banner" /></a>
  </div>
</body> 
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

allex_carvalho    124

allex_carvalho
Postado

Tente assim:

<!DOCTYPE html>
<html> 
    <head> 
		<title>Bem Vindo</title> 
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function(){
				jQuery("#fechar").click(function(){
					jQuery("#entrada").addClass("invisivel");
				});
			})
		</script>
		<style type="text/css">
			#entrada {
				top: 0;
				left:0;
				width:100%;
				height:100%;
				position: absolute;
				background-color: #000;
				opacity: .8;
			}
			.invisivel {
				display: none;
			}
			img#banner {  
				width: 300px;
				position: absolute;
				top: 50%;
				margin-top:-150px;
				left: 50%;
				border: 0;
			}
			#fechada {
				z-index:10;
				width: 50px;
				position: absolute;
				top: 50%;
				margin-top:0px;
				left: 50%;
				margin-left: 0px;
				border: 0;
			}
			img#fechar {  
				z-index:1;
				width: 50px;
				position: absolute;
				top: 50%;
				margin-top:-180px;
				left: 50%;
				margin-left: 125px;
				border: 0;
			} 
		</style>
	</head>
	<body> 
		<img src="aa.jpg" />
		<div id="fechada">
			<img src="fechar.png" id="fechar" width="500" />
		</div>
	    <div id="entrada">
			<a href="../eleicoes2014"><img src="bannerClique.jpg" id="banner" />Estamos aqui</a>
		</div>
	</body> 
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Era exatamente isso: função e div com os mesmos nomes.

 

Obrigado!

 

e o com jquery tambem funcionou!

 

Obrigado!

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