Ir para conteúdo

POWERED BY:

Arquivado

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

falamansa

Problema com SEO e POPUP's

Por , em Javascript

Recommended Posts

falamansa    0

falamansa
Postado

Bom em primeiro lugar a melhor opção pra facilitar a vida será pegar a biblioteca JQUERY (http://code.jquery.com/jquery-1.4.2.js);

Depois de pego a biblioteca, fazemos uma referencia a ela no javascript dentro da tag 

<HEAD>
<script src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script>
// Aplico o evento onload via jquery
$(document).ready(function(){
   //  aplico o evento aos links que abrem a popup dentro do corpo da pagina
   $('body #imagem').each(function(){
	$(this).click(function(){
             //  Chamo a função que cria a div da popup
	     criadivs();
             //  esse estou fazendo com imagem pq é o mais usado, mas pode ser feito pra textos iframes, texto seria melhor. Uma dica é usar a função (load) do jquery pra exibir texto
	     criadivsimg($(this).attr('href'));
             // adiciona um return false para que o navegador não redireciona  link
              return false;
		});
	});
});

function criadivs(){
	// Mando o jquery cria uma div e adiciona atributos e css a ela
	$('<div></div>')
	.attr({align:'center',id:'controlpoup'})
	.css({
	background:'#000',
	border:'0px',
	position:'fixed',
	left:'0px',
	top:'0px',
	filter:'alpha(opacity=60)',
	opacity:'0.6',
	height:$(window).height()+"px",
	width:$(window).width()+"px",
	'vertical-align': 'middle',
	})
	// Adiciona a div no corpo da pagina
	// E adiciona o evento para fechar a div se o usuario clickar nela ou no x
	.appendTo("body");
	$('#controlpoup').click(function(){
		$('#geral').remove();
		$('#controlpoup').remove();
	});
	
	
	$('<div></div>')
	.attr('id','geral')
	.css({
	background:'#DBDBDB',
	border:'5px solid #000',
	position:'fixed',
	left:'0px',
	top:'0px',
	height:"auto",
	width:"auto",
	'border-radius':'10px',
	'-moz-border-radius':'10px',
	'-webkit-border-radius':'10px',
	'-khtml-border-radius':'10px',
	})
	.appendTo("body");
	
	$('<div></div>')
	.attr({align:"right",id:'fechapoup'})
	.css({
		color:"#FF0000",
		cursor:"pointer",
		"padding-right":"5px",
		"border-bottom":'1px solid #000',
	})
	.html("<b>X</b>")
	.appendTo("#geral");
	$('#fechapoup').click(function(){
		$('#geral').remove();
		$('#controlpoup').remove();
	});
}

/////////////////////  DIV'S de imagens
// Crio a div que recebera a imagem e enquanto a imagem não carrega ele exibe a mensagem de carregando(pode ser persolaizado)

var intervalo;
function criadivsimg(src){
	$('<div></div>')
	.attr({'id':'loaddivimg'})
	.css({'padding':'15px',border:'0px'})
	.html("Aguarde Carregando ...")
	.appendTo("#geral");
	
	var img = document.createElement('img');
	img.src = src;
	img.id = "imgpopup";
	img.border = 0;
	document.getElementById('geral').appendChild(img);
	
	//posiciono a div no "centro" do navegador
	$('#geral').css({
			top:(($(window).height() - $('#geral').height()) / 2.5) + 'px',
			left:(($(window).width() - $('#geral').width()) / 2) + 'px',
		});
	//Assim que a imagem é carregada eu adiciona ela na div
	//E verifico se ele for maior que a resolução do navegador eu a reduzo pelo tamanho dele
	img.onload = function(){
		$("#loaddivimg").remove();
		if($("#imgpopup").height() > $(window).height()){
			$("#imgpopup").height($(window).height() - 50 + 'px');
		}
		if($("#imgpopup").width() > $(window).width()){
			$("#imgpopup").width($(window).width() - 30  + 'px');
		}
		$("#fechapoup").mousedown(function(){
			drags();
		});
		$("#fechapoup").mouseup(function(){
			para();
		});
		
		$('#geral').css({
			top:(($(window).height() - $('#geral').height()) / 2.5) + 'px',
			left:(($(window).width() - $('#geral').width()) / 2) + 'px',
		});
	};
	return false;
}
</script>
</HEAD>
<body>
<a href='http://t3.gstatic.com/images?q=tbn:NVUHZdbsTCep-M:http://www.ipjornal.com/wp-content/uploads/2010/07/46-Futuro-do-Google-%C3%A9-%C2%ABProcurar-sem-procurar%C2%BB.jpg&t=1' id='imagem'>Abre uma imagem do google</a><br>
Não se esqueça de adicionar o id a todos links que vão abrir a div, que no caso desse exemplo foi id "imagem".
<br>
<br>
Minha intenção é para aqueles que estão a prendendo agora, pq pessaos com alto nivel de conhecimento pode pesquizar algo mais eficiente ainda

</body>

Neste script esta corrigido o BUG do IECA:

<!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>Untitled Document</title>
<HEAD>
<script src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script>
// Aplico o evento onload via jquery
$(document).ready(function(){
   //  aplico o evento aos links que abrem a popup dentro do corpo da pagina
   $('body #imagem').each(function(){
	$(this).click(function(){
             //  Chamo a função que cria a div da popup
	     criadivs();
             //  esse estou fazendo com imagem pq é o mais usado, mas pode ser feito pra textos iframes, texto seria melhor. Uma dica é usar a função (load) do jquery pra exibir texto
	     criadivsimg($(this).attr('href'));
             // adiciona um return false para que o navegador não redireciona  link
              return false;
		});
	});
});

function criadivs(){
	// Mando o jquery cria uma div e adiciona atributos e css a ela
	$('<div></div>')
	.attr({align:'center',id:'controlpoup'})
	.css({
	background:'#000',
	border:'0px',
	position:'fixed',
	left:'0px',
	top:'0px',
	filter:'alpha(opacity=60)',
	opacity:'0.6',
	height:$(window).height()+"px",
	width:$(window).width()+"px",
	'vertical-align': 'middle',
	})
	// Adiciona a div no corpo da pagina
	// E adiciona o evento para fechar a div se o usuario clickar nela ou no x
	.appendTo("body");
	$('#controlpoup').click(function(){
		$('#geral').remove();
		$('#controlpoup').remove();
	});
	
	
	$('<div></div>')
	.attr('id','geral')
	.css({
	background:'#DBDBDB',
	border:'5px solid #000',
	position:'fixed',
	left:'0px',
	top:'0px',
	height:"auto",
	width:"auto",
	'border-radius':'10px',
	'-moz-border-radius':'10px',
	'-webkit-border-radius':'10px',
	'-khtml-border-radius':'10px',
	})
	.appendTo("body");
	
	$('<div></div>')
	.attr({align:"right",id:'fechapoup'})
	.css({
		color:"#FF0000",
		cursor:"pointer",
		"padding-right":"5px",
		"border-bottom":'1px solid #000',
	})
	.html("<b>X</b>")
	.appendTo("#geral");
	$('#fechapoup').click(function(){
		$('#geral').remove();
		$('#controlpoup').remove();
	});
}

/////////////////////  DIV'S de imagens
// Crio a div que recebera a imagem e enquanto a imagem não carrega ele exibe a mensagem de carregando(pode ser persolaizado)

var intervalo;
function criadivsimg(src){
	$('<div></div>')
	.attr({'id':'loaddivimg'})
	.css({'padding':'15px',border:'0px'})
	.html("Aguarde Carregando ...")
	.appendTo("#geral");
	
	var img = document.createElement('img');
	img.id = "imgpopup";
	img.border = 0;
	
	//posiciono a div no "centro" do navegador
	$('#geral').css({
			top:(($(window).height() - $('#geral').height()) / 2.5) + 'px',
			left:(($(window).width() - $('#geral').width()) / 2) + 'px',
		});
	//Assim que a imagem é carregada eu adiciona ela na div
	//E verifico se ele for maior que a resolução do navegador eu a reduzo pelo tamanho dele
	img.onload=function(){
		$('#geral').append(img);
		$("#loaddivimg").remove();
		if($("#imgpopup").height() > $(window).height()){
			$("#imgpopup").height($(window).height() - 50 + 'px');
		}
		if($("#imgpopup").width() > $(window).width()){
			$("#imgpopup").width($(window).width() - 30  + 'px');
		}
		$('#geral').css({
			top:(($(window).height() - $('#geral').height()) / 2.5) + 'px',
			left:(($(window).width() - $('#geral').width()) / 2) + 'px',
		});
	};
	img.src = src;
	return false;
}
</script>
</HEAD>
<body>
<a href='http://t3.gstatic.com/images?q=tbn:NVUHZdbsTCep-M:http://www.ipjornal.com/wp-content/uploads/2010/07/46-Futuro-do-Google-%C3%A9-%C2%ABProcurar-sem-procurar%C2%BB.jpg&t=1' id='imagem'>Abre uma imagem do google</a><br>
Não se esqueça de adicionar o id a todos links que vão abrir a div, que no caso desse exemplo foi id "imagem".
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

ixi cara..

 

2 coisas importantes:

-> não use tanto javascript para setar css, isso é 'lento'.. era melhor que você tivesse uma class css definida, e só atribuisse a class nos elementos criados com js, isso é bem mais rápido para o navegador

-> e você não deve repetir IDs... logo, não é certo fazer vários id="imagem", ou qq coisa.. id deve ser um identificador único no documento

 

no meu ie6 continua não funcionando

vou tentar fazer algo mais simples aqui..

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