Abrir uma janela modal através de um form

mzaidan · Março 9, 2015

Prezados, possuo essa janela modal:

Código:

<!DOCTYPE html>
<html>
<head>
	<title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<!-- Add jQuery library -->
	<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>

	<!-- Add mousewheel plugin (this is optional) -->
	<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>

	<!-- Add fancyBox main JS and CSS files -->
	<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
	<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />

	<!-- Add Button helper (this is optional) -->
	<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
	<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

	<!-- Add Thumbnail helper (this is optional) -->
	<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
	<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

	<!-- Add Media helper (this is optional) -->
	<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			/*
			 *  Simple image gallery. Uses default settings
			 */

			$('.fancybox').fancybox();

			/*
			 *  Different effects
			 */

			// Change title type, overlay closing speed
			$(".fancybox-effects-a").fancybox({
				helpers: {
					title : {
						type : 'outside'
					},
					overlay : {
						speedOut : 0
					}
				}
			});

			// Disable opening and closing animations, change title type
			$(".fancybox-effects-b").fancybox({
				openEffect  : 'none',
				closeEffect	: 'none',

				helpers : {
					title : {
						type : 'over'
					}
				}
			});

			// Set custom style, close if clicked, change title type and overlay color
			$(".fancybox-effects-c").fancybox({
				wrapCSS    : 'fancybox-custom',
				closeClick : true,

				openEffect : 'none',

				helpers : {
					title : {
						type : 'inside'
					},
					overlay : {
						css : {
							'background' : 'rgba(238,238,238,0.85)'
						}
					}
				}
			});

			// Remove padding, set opening and closing animations, close if clicked and disable overlay
			$(".fancybox-effects-d").fancybox({
				padding: 0,

				openEffect : 'elastic',
				openSpeed  : 150,

				closeEffect : 'elastic',
				closeSpeed  : 150,

				closeClick : true,

				helpers : {
					overlay : null
				}
			});

			/*
			 *  Button helper. Disable animations, hide close button, change title type and content
			 */

			$('.fancybox-buttons').fancybox({
				openEffect  : 'none',
				closeEffect : 'none',

				prevEffect : 'none',
				nextEffect : 'none',

				closeBtn  : false,

				helpers : {
					title : {
						type : 'inside'
					},
					buttons	: {}
				},

				afterLoad : function() {
					this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
				}
			});


			/*
			 *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
			 */

			$('.fancybox-thumbs').fancybox({
				prevEffect : 'none',
				nextEffect : 'none',

				closeBtn  : false,
				arrows    : false,
				nextClick : true,

				helpers : {
					thumbs : {
						width  : 50,
						height : 50
					}
				}
			});

			/*
			 *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
			*/
			$('.fancybox-media')
				.attr('rel', 'media-gallery')
				.fancybox({
					openEffect : 'none',
					closeEffect : 'none',
					prevEffect : 'none',
					nextEffect : 'none',

					arrows : false,
					helpers : {
						media : {},
						buttons : {}
					}
				});

			/*
			 *  Open manually
			 */

			$("#fancybox-manual-a").click(function() {
				$.fancybox.open('1_b.jpg');
			});

			$("#fancybox-manual-b").click(function() {
				$.fancybox.open({
					href : 'iframe.html',
					type : 'iframe',
					padding : 5
				});
			});

			$("#fancybox-manual-c").click(function() {
				$.fancybox.open([
					{
						href : '1_b.jpg',
						title : 'My title'
					}, {
						href : '2_b.jpg',
						title : '2nd title'
					}, {
						href : '3_b.jpg'
					}
				], {
					helpers : {
						thumbs : {
							width: 75,
							height: 50
						}
					}
				});
			});


		});
	</script>
	<style type="text/css">
		.fancybox-custom .fancybox-skin {
			box-shadow: 0 0 50px #222;
		}

		body {
			max-width: 700px;
			margin: 0 auto;
		}
	</style>
</head>
<body>
<form action="teste.php" method="post" name="simula">
	

	

		<a class="fancybox fancybox.ajax" href="ajax.txt">Ajax</a>
		<a class="fancybox fancybox.ajax" onclick="document.simula.submit(); return false; href="#">Ajax</a>
		

	<div id="inline1" style="width:400px;display: none;">
		
	</div>
</form>
</body>
</html>

O link sem estar em um form funciona normal.

O primeiro a href abre normal. Mas so abre a janela, não consigo passar valores.

Quando tento colocar dentro de um form, para puxar valores na outra tela, da o erro.

Ele não abre a janela modal, abre em uma outra página.

Alguém sabe como eu ajeito isso?

Grato

Lucas Medina · Março 9, 2015

Algum erro de Javascript acontece no console?

Caso o problema se trate somente do link que está sendo aberto, ou no HTML, observe estes pontos:

* O segundo link possui um atributo onclick que não está sendo fechado com aspas.

<a class="fancybox fancybox.ajax" onclick="document.simula.submit(); return false; href="#">Ajax</a>

Troque este acima por este abaixo:

<a class="fancybox fancybox.ajax" onclick="document.simula.submit(); return false;" href="#">Ajax</a>

Também para cancelar o uso dos links, você pode usar algo semelhante a:

$('a').click(function(){
  console.log('No');
  return false;
});

Mas claro, você não precisa dar voltas e voltas, o mais importante é o return false;, e você pode inseri-lo diretamente na tag <a> através do atributo onclick.

Boa sorte!

mzaidan · Março 9, 2015

Amigo, obrigado pela correção.

O erro, além desse que vc citou, é que, ao clicar no link, ele não abre uma nova janela e sim vai direto para outra pagina, sem ser uma janela modal.

Não estou conseguindo abrir uma janela modal no método submit.

Grato.

Lucas Medina · Março 9, 2015

Amigo, obrigado pela correção.

O erro, além desse que você citou, é que, ao clicar no link, ele não abre uma nova janela e sim vai direto para outra pagina, sem ser uma janela modal.

Não estou conseguindo abrir uma janela modal no método submit.

Grato.

Utilize de um atributo onsubmit no formulário com o próprio return false;, ou então utilize do manipulador de eventos .submit no próprio jQuery ;)

Quando você for chamar o submit, ele pode executar a função, e entrar com return false; ao final do que você está executando:

$('#meu-formulario').submit(function(){
  funcaoModal();
  return false;
});

mzaidan · Março 9, 2015

Não entendi, mestre.

To usando assim:

<a class="fancybox fancybox.ajax" onclick="document.simula.submit(); return false;" href="#">Ajax</a>

Não entendi o que vc pediu para eu fazer.

Tem como explicar melhor?

Grato.

Lucas Medina · Março 9, 2015

Claro!

O link já possui o return false;, então naturalmente já não vai lhe mandar para outro local.

Mas se você interagir pelo formulário, este também vai precisar de um desses, assim como também um botão para submit do formulário.

<form method="post" name="simula" onsubmit="submitFormulario();">
  <button type="submit">Enviar</button>
</form>

A função que o formulário chama em submit precisa possuir um return false; ao final:

function submitFormulario(){
  /* Faz o que o submit faz */
  return false;
}

Assim, quando você enviar o formulário, ele já deve funcionar.

Se você simplesmente for fazer uma requisição através da tag <a>, esta forma já está funcionando pra mim:

<a onclick="minhaFuncao();return false;">Clique aqui</a>

Isso já deve ser suficiente pra impedir o link de abrir como um link normal. Se o problema for com a modal, você precisa utilizar do console, e ver se ocorrem erros de Javascript (sugestão).

Boa sorte! ;)

mzaidan · Março 10, 2015

<form method="post" name="simula" action="teste.php" onsubmit="submitFormulario();">
  
<input type="text" name="oi">
 
		
		
           <a href="teste.php" class="fancybox fancybox.ajax" onclick="minhaFuncao();return false;">Ajax</a>

Ele até abriu normal, mas não enviou os dados para a outras pagina.

Ou melhor, não consegui pegar os dados na teste.php

<?
$oi = $_POST['oi'];
echo $oi;
?>

Não retornou valor algum.

O que eu fiz de errado?

Desde já agradeço.

Entrar

Arquivado

Abrir uma janela modal através de um form

Recommended Posts

mzaidan 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Medina 17

Compartilhar este post

Link para o post

Compartilhar em outros sites

mzaidan 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Medina 17

Compartilhar este post

Link para o post

Compartilhar em outros sites

mzaidan 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Medina 17

Compartilhar este post

Link para o post

Compartilhar em outros sites

mzaidan 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante