Como Chamar Form Modal

bydario · Novembro 18, 2015

Pessoal como faco pra chamar este form modal caso venha ocorrer erro de login...

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->       <!-- Bootstrap core CSS -->    <link href="css/bootstrap.min.css" rel="stylesheet">    <!-- Custom styles for this template -->    <link href="css/signin.css" rel="stylesheet">    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->    <script src="js/ie-emulation-modes-warning.js"></script>    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!--[if lt IE 9]>      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>    <![endif]-->  </head>  <body>      <div class="container">      <form class="form-signin" method="post" action="">      <h2 class="form-signin-heading">Efetue o Login</h2>        <label for="inputusuario" class="sr-only">Usuário</label>       <input class="form-control" placeholder="Usuário" name="usuario" type="text" autofocus>         <label for="inputsenha" class="sr-only">Senha</label>          <input class="form-control" placeholder="Senha" name="senha" type="password" value="">        <div class="checkbox">          <label>            <input type="checkbox" value="remember-me"> Lembrar Usuário e Senha          </label>        </div>        <button class="btn btn-lg btn-primary btn-block" type="submit" name="entrar">Entrar</button>      </form>    </div> <!-- /container -->    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->    <script src="js/ie10-viewport-bug-workaround.js"></script>  </body></html>     <div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true">      <div class="modal-dialog modal-sm">        <div class="modal-content">          <div class="modal-header">            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>            <h4 class="modal-title" id="myModalLabel">Small Modal</h4>          </div>          <div class="modal-body">            <h3>Modal Body</h3>          </div>          <div class="modal-footer">            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>            <button type="button" class="btn btn-primary">Save changes</button>          </div>        </div>      </div>    </div>    <script src="https://code.jquery.com/jquery.js"></script><script src="js/bootstrap.min.js"></script>    <?phpif(isset($_POST['entrar']))//este é o nome do botão no seu form de login tipo submit{$usuario = $_POST['usuario']; //este é o nome do textbox para usuario$senha = $_POST['senha']; // a mesma coisa//faz a busca no banco OBS: você deve usar as variaveis acima$sqlUsuario = mysql_query("SELECT * FROM tb_login WHERE usuario = '$usuario' AND senha = '$senha'");//aqui recupera os valores do banco e joga pras variaveis de sessãowhile($rsUsuario = mysql_fetch_array($sqlUsuario)){ $_SESSION['id'] = $rsUsuario['id'];//o que está entre os colchetes é o campo do banco $_SESSION['local'] = $rsUsuario['local'];}/* verifica se as variaveis de sessão foi setadas com valores do banco, se foram setadas a variavel de sessão logado vai ser true senão vai ser false */if(isset($_SESSION['id'])){if($_SESSION['local'] == "ubs"){  echo "<meta http-equiv='refresh' content='0, url=?p=ubs'>";}else if($_SESSION['local'] == "ama"){  echo "<meta http-equiv='refresh' content='0, url=?p=ama'>";}}else{echo <a data-toggle="modal" data-target="#smallModal"></a>  }}?>

estou tentando colocar na linha vermelha...

Wesley Santos · Novembro 19, 2015

Não entendi muito bem, pelo oque eu entendi você quer chamar uma outra pagina caso o login esteja errado, se for isso e só direcionar o usuário na condição if, no caso você coloca no else.

/* verifica se as variaveis de sessão foi setadas com valores do banco, 
se foram setadas a variavel de sessão logado vai ser true senão vai ser false */
if(isset($_SESSION['id'])){
 
if($_SESSION['local'] == "ubs"){
  echo "<meta http-equiv='refresh' content='0, url=?p=ubs'>";
}
else if($_SESSION['local'] == "ama"){
  echo "<meta http-equiv='refresh' content='0, url=?p=ama'>";
}
 
}else{
 // coloca aqui
echo <a data-toggle="modal" data-target="#smallModal"></a> 
 }
}
 
?>

bydario · Novembro 19, 2015

Ola Wesley bom dia obrigada pela resposta, vou tentar explica kkk e que ficou meio confuso mesmo...

Tenho uma modal que e chamada por um button que funciona normalmente...

...

</div>

Para chamar usando o button eu ultilizo este trecho...

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

Minha duvida e como faco pra chamar esta mesma modal no script php tentei isso mais deu erro...

echo <a data-toggle="modal" data-target="#smallModal"></a>

Wesley Santos · Novembro 19, 2015

Você quer mostrar o botão em uma pagina PHP? se for isso e só colocar echo " código ";

ASSIM:

}else{
// coloca aqui
echo "<a data-toggle="modal" data-target="#smallModal"></a> "
}

E creio que você tem que colocar o src do Java Script que trata o modal na pagina PHP.

Agora se você quer manipular os dados no PHP e só chamar o name da modal.

Hewitt · Novembro 19, 2015

Acredito que ele queira mostar o MODAL, caso dê erro no login. Sem apertar botão.

bydario · Novembro 23, 2015

Acredito que ele queira mostar o MODAL, caso dê erro no login. Sem apertar botão.

E isto mesmo que estou tentando fazer...Desculpe a demora estava sem internet aqui em casa...

Alaerte Gabriel · Novembro 23, 2015

Terá que fazer uma função em jquery para ser chamada, do jeito que está não funciona. Seu problema é javascript e não php. Tópico movido.

Fábio BN · Novembro 23, 2015

Oi.

Eu conseguir abrir uma modal após um erro usando este método:


</head>

 <% if session("erro_video") <> "" then 
response.write " <body bgcolor='#FFFFFF' topmargin='0' leftmargin='0' onLoad=""$('#my-modal').modal('show');""> "
else
response.write "<body bgcolor='#FFFFFF' topmargin='0' leftmargin='0'>"
end if
session("erro_video") = ""
%>

<!-- Carrega Modal ao dar erro de senha -->
<div id="my-modal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
    <div class="modal-content"> 
      <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel"><font class="text-primary">Atenção Senha Incorreta</font></h4>
      </div>
      <div class="modal-body">Vídeo não encontrado!</div>
    </div>
    </div>
  </div>
</div>
<!-- Fim Carrega Modal ao dar erro de senha -->

Você faz um IF no <body> da página, caso o retorno seja um erro, ele carrega a Modal no <body>, caso contrário não carrega.

No meu caso está em ASP, mas vc pode fazer em PHP este IF.

Abraços!

Fábio Nascimento.

bydario · Novembro 27, 2015

Não consigo implementar este aviso, se o usuario tentar logar emitir um aviso estou usando o codigo abaixo funciona normalmente, mais queria colocar um modal mais nao consigo...

echo "<script>alert('Usuário ou Senha Inválidos');</script>";

MarkZu · Novembro 29, 2015

Olá vamos ver se te ajudo.

Bom vamos tentar explicar o que voce quer!

O Bootstrap nao da suporte a php entao logo para um evento de abrir o modal so e possivel com o javascript
tendo isso em mente. podemos precisar adicionar um javascript na sua pagina!

E como ativar esta função apenas quando o php verificar que deu algo errado?

Tendo em vista que o javascript carrega juntamente com a pagina e o php executa depois que e feito um submit do form, podemos ter um problema de sincronização dos eventos.

o método que recomendo e o uso de ajax.

Visto que seu codigo de php há muitas brechas e possiveis casos de erros nao vamos comentar aqui ja que você e iniciante.

Cria um arquivo php só com a validação.

<?php
if(isset($_POST['entrar'])){
	 
	$usuario = $_POST['usuario']; //este é o nome do textbox para usuario
	$senha = $_POST['senha']; // a mesma coisa
	 
	//faz a busca no banco OBS: você deve usar as variaveis acima
	$sqlUsuario = mysql_query("SELECT * FROM tb_login WHERE usuario = '$usuario' AND senha = '$senha'");
	 
	//aqui recupera os valores do banco e joga pras variaveis de sessão
	while($rsUsuario = mysql_fetch_array($sqlUsuario)){
	 $_SESSION['id'] = $rsUsuario['id'];//o que está entre os colchetes é o campo do banco
	 $_SESSION['local'] = $rsUsuario['local'];
	}

	if(isset($_SESSION['id'])){
	 
		//Fiz uma rapida simplificação aqui
		if($_SESSION['local'] == "ubs" || $_SESSION['local'] == "ama"){
		  $resultado = array(
			"validacao" => true, //Retorna true para a requisicao ajax
			"pagina" => "?p=".$_SESSION['local'] //retorna o local para o ajax redirecionar
		  );
		}else{
			$resultado = array(
				"validacao" => false, //retorna false para o ajax caso o local seja diferente do esperado
				"error" => "Nenhum local encontrado" //Esse e o valor do error que o ajax receberá
			);
		}
	 
	}else{
		$resultado = array(
			"validacao" => false, //retorna false para o ajax caso o a sesao id nao exista
			"error" => "Usuario não encontrado" //Esse e o valor do error que o ajax receberá
		);
	}
}else{
	$resultado = array(
		"validacao" => false, //retorna false para o ajax caso o a sesao id nao exista
		"error" => "Nenhuma requisição encontrada" //Esse e o valor do error que o ajax receberá
	);
}
echo json_encode($resultado); // transforma o array $resultado em um json para o ajax

Pronto . Digamos que esse arquivo seja o "usuario.php".

Agora a pagina principal ficaria assim

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
   
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
 
    <!-- Custom styles for this template -->
    <link href="css/signin.css" rel="stylesheet">
 
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="js/ie-emulation-modes-warning.js"></script>
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.c...n.js"></script>
      <script src="https://oss.maxcdn.c...n.js"></script>
    <![endif]-->
  </head>
 
  <body>
  
 
    <div class="container">
 
	<form name="entrar" class="form-signin" method="post" action="">  
		<h2 class="form-signin-heading">Efetue o Login</h2>
		<label for="inputusuario" class="sr-only">Usuário</label>
			<input class="form-control" placeholder="Usuário" name="usuario" type="text" autofocus> 
		<label for="inputsenha" class="sr-only">Senha</label>
			<input class="form-control" placeholder="Senha" name="senha" type="password" value="">
		<div class="checkbox">
		  <label>
			<input type="checkbox" value="remember-me"> Lembrar Usuário e Senha
		  </label>
		</div>
		<button class="btn btn-lg btn-primary btn-block" type="submit" name="entrar">Entrar</button>
	</form>
 
    </div> <!-- /container -->
  
	<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true">
	  <div class="modal-dialog modal-sm">
		<div class="modal-content">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h4 class="modal-title" id="myModalLabel">Small Modal</h4>
		  </div>
		  <div class="modal-body">
			<h3>Modal Body</h3>
		  </div>
		  <div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			<button type="button" class="btn btn-primary">Save changes</button>
		  </div>
		</div>
	  </div>
	</div>
  
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>
	<script src="https://code.jquery....y.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script> 
	(function ($) {
		$("body").on("submit","form[name='entrar']",function(){ // Aqui ele fica aguardado na pagina quando houver algum submit nesse formulario ele irá executar esta funcao
			var form = $("form[name='entrar']").serialize(); // aqui ele serializa os campos do formulario
			$.ajax({
					type: "post", // aqui e o methodo do formulario que iremos enviar
					url: "usuario.php", //aqui e o caminho da pagina php que criamos 
					data: form,	//aqui e os dados serializados do form
					dataType: "json", //aqui define o formato de dados que esperamos receber
					error: function (e) {console.log(e);}, // aqui mostra os erro caso haja algum tanto no php como na requisicao
					beforeSend: function () { console.log('Enviando os dados para validação no arquivo php. aguarde!');}, // aqui so mostrara esta mensagem antes de enviar no console do browser
					success: function (data) { 
						if (data.validacao) {  //aqui verifica se validação é true
							window.location.href = "URL-DA-SUA-PAGINA-DE-LOGIN" + data.pagina; //aqui ele recebe o valor true e redireciona para a pagina da $_SESSION["local"]
						} else {
							$('#smallModal').modal('show'); // aqui ele recebe o valor do erro e entao abre o modal
						}
					}
			});
		});
	})(jQuery);
	</script>
  </body>	
</html>

bom e isso tenta ai, se nao der tenta dnovo :D qualquer coisa me avisa pra tirar dúvida

Ted k' · Novembro 30, 2015

É só fazer isso:

echo '<script>window.onload = function(){$("#smallModal").modal();}</script>';

Arquivado

Como Chamar Form Modal

Recommended Posts

bydario 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wesley Santos 28

Compartilhar este post

Link para o post

Compartilhar em outros sites

bydario 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wesley Santos 28

Compartilhar este post

Link para o post

Compartilhar em outros sites

Hewitt 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

bydario 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alaerte Gabriel 662

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fábio BN 17

Compartilhar este post

Link para o post

Compartilhar em outros sites

bydario 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

MarkZu 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ted k' 126

Compartilhar este post

Link para o post

Compartilhar em outros sites

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Fóruns

Tempo Real

Informação importante