Ir para conteúdo

Arquivado

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

mzaidan

Window.open igual do forum

Por , em Desenvolvimento frontend

Recommended Posts

mzaidan    2

mzaidan
Postado

Prezados, quando clicamos para efetuar login, uma página é aberta.

Nela, além de outras coisas, como não dar para redirecionar, encontramos apenas o botão de fechar. Impossibilitando maxizar, minimizar, etc.

Como que isso é feito?

 

Grato.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mzaidan    2

mzaidan
Postado

Cara, tentei aqui.

Ficou até mais ou menos.

Só que eu estou passando parâmetros, ai deu erro.

Teria algo mais simples como personalizar o window.open nao?

 

Esse do forum usa qual?

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Não sei, mas você pode criar uma janela modal manualmente também.

Só criar uma div para o conteúdo e criar uma função que faça ela surgir na tela.

 

Na net se encontra alguns tutoriais para isso..

Exemplo 1 - Exemplo 2

Compartilhar este post

Link para o post
Compartilhar em outros sites

mzaidan    2

mzaidan
Postado

Esse deu certo.

Só que onde eu clico, ao invés de um <a href..

é um submit, dentro de um form.

Ai não to conseguindo rodar.

Código rodando:

<html>
	<head>
		<title>Janela modal</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
		<script type="text/javascript">
			$(document).ready(function(){
				$("a[rel=modal]").click( function(ev){
					ev.preventDefault();

					//alterado
					var id = '.window';

					var alturaTela = $(document).height();
					var larguraTela = $(window).width();
	
					//colocando o fundo preto
					$('#mascara').css({'width':larguraTela,'height':alturaTela});
					$('#mascara').fadeIn(1000);	
					$('#mascara').fadeTo("slow",0.8);

					var left = ($(window).width() /2) - ( $(id).width() / 2 );
					var top = ($(window).height() / 2) - ( $(id).height() / 2 );
					
					$(id).css({'top':top,'left':left});
					
					//inserido 
					href = $(this).attr("href");
					$('.window').load(href);

					
					$(id).show();	
 				});

 				$("#mascara").click( function(){
 					$(this).hide();
 					$(".window").hide();
 				});

 				$('.fechar').click(function(ev){
 					ev.preventDefault();
 					$("#mascara").hide();
 					$(".window").hide();
 				});
			});
		</script>

		<style type="text/css">

		.window{
			display:none;
			width:300px;
			height:300px;
			position:absolute;
			left:0;
			top:0;
			background:#FFF;
			z-index:9900;
			padding:10px;
			border-radius:10px;
		}

		#mascara{
			position:absolute;
  			left:0;
  			top:0;
  			z-index:9000;
  			background-color:#000;
  			display:none;
		}

		.fechar{display:block; text-align:right;}

		</style>

	</head>


	<body>
		<a href="form.php" rel="modal">Janela modal</a>
		


		<div class="window" id="janela1">
			
		</div>

		<!-- mascara para cobrir o site -->	
		<div id="mascara"></div>
	</body>
</html>

Meu codigo:

<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
		<script type="text/javascript">
			$(document).ready(function(){
				$("a[rel=modal]").click( function(ev){
					ev.preventDefault();

					//alterado
					var id = '.window';

					var alturaTela = $(document).height();
					var larguraTela = $(window).width();
	
					//colocando o fundo preto
					$('#mascara').css({'width':larguraTela,'height':alturaTela});
					$('#mascara').fadeIn(1000);	
					$('#mascara').fadeTo("slow",0.8);

					var left = ($(window).width() /2) - ( $(id).width() / 2 );
					var top = ($(window).height() / 2) - ( $(id).height() / 2 );
					
					$(id).css({'top':top,'left':left});
					
					//inserido 
					href = $(this).attr("href");
					$('.window').load(href);

					
					$(id).show();	
 				});

 				$("#mascara").click( function(){
 					$(this).hide();
 					$(".window").hide();
 				});

 				$('.fechar').click(function(ev){
 					ev.preventDefault();
 					$("#mascara").hide();
 					$(".window").hide();
 				});
			});
		</script>

		<style type="text/css">

		.window{
			display:none;
			width:300px;
			height:300px;
			position:absolute;
			left:0;
			top:0;
			background:#FFF;
			z-index:9900;
			padding:10px;
			border-radius:10px;
		}

		#mascara{
			position:absolute;
  			left:0;
  			top:0;
  			z-index:9000;
  			background-color:#000;
  			display:none;
		}

		.fechar{display:block; text-align:right;}

		</style>

	</head>


<form method="POST" action="result.php">
...
.
.
<input type="submit" value="Fazer Simulado" name="envia" rel="modal">
</form>
<div class="window" id="janela1">
			
		</div>

		<!-- mascara para cobrir o site -->	
		<div id="mascara"></div>

Assim ele ta abrindo na mesma página, ao invés de abrir separadamente.

O que eu poderia fazer?

 

Grato

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Tenta por um target="_blank" no form, talvez dê.

Não lembro como faz para abrir na "página pai", tenta dar uma procurada.

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