Jump to content
Knot

login com popup

Recommended Posts

Knot

Boas!

Estou a ter alguns problemas com um simples login!

Queria que o login aparecesse numa espécie de pop-up, tipo como aqui no site quando fazemos login.

Encontrei este script http://zurb.com/playground/reveal-modal-plugin.

Funciona relativamente bem. Ao clicar em Login, abre o "popup" e permite introduzir os dados e se os dados estiverem corretos fica o login feito. Mas se introduzir dados errados, o "popup" fecha e tenho que clicar de novo em Login. Não há maneira de o "popup" estar sempre aberto até o utilizador carregar no X para fechar ou até introduzir um login válido?

Já tentei com uns whiles e tal, mas sem sucesso.

<?php	
include "init.php";
?>
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="css/geral.css" type="text/css"/>
<link rel="stylesheet" href="css/reveal.css" type="text/css"/>
<link rel="stylesheet" href="css/js-image-slider.css" type="text/css" />
<script src="js/js-image-slider.js" type="text/javascript"></script>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="js/jquery.reveal.js" type="text/javascript"></script>
<title>Registo de Apostas Online</title>
</head>

<body>

<div class="topo">
<div class="topocentro">
	<div class="menu1">
		<ul class="menu">
			<li><a href="index.php" class="current">Home<span class="divider"></span></a></li>
			<li><a href="noticias.php">Noticias<span class="divider"></span></a></li>
			<?php
			if (isset($_SESSION['username']))
			{
				echo "<li><a href='user.php'>Apostas<span class='divider'></span></a></li>";
				echo "<li><a href='perfil.php'>Perfil</a></li>";
			}
			else
			{
				echo "<li><a href='registar.php'>Registar</a></li>";
			}
			?>
		</ul>
	</div>


	<div class="login_index">
		<?php
			if (isset($_SESSION['username']))
			{	
				echo "Está ligado como " . $_SESSION['username'] ." <a href='logout.php'> Logout</a>";
			}
			else
			{
				echo "Não está ligado. <a href='#' class='big-link' data-reveal-id='myModal'> Login</a>";
			}
		?>
	</div>


		<?php	
			if(isset($_POST['Login']))
			{		
				$consulta="Select * from utilizador where username='" . $_POST['username'] . "' and password='" . $_POST['password'] . "'";	
				$resultado=mysql_query($consulta);	

				if (mysql_num_rows($resultado)>0)
				{				
					$linha=mysql_fetch_array($resultado);
					$_SESSION['username']=$linha['username'];
					$_SESSION['id_utilizador']=$linha['id_utilizador'];	

					header("location: index.php");
				}	
				else	
				{
				?>
				<div id="myModal" class="reveal-modal">
					<div class="login">
					<form action="index.php" method="post" autocomplete="on"	>
						Username:   <input type="text" name="username" size="20" autofocus><p>
						Password:   <input type="password" name="password" size="20"><p>
						<input type="submit" name="Login" value="Login">  
					</form>
					Tente novamente!
					</div>
					<a class="close-reveal-modal">×</a>
					</div>
				<?php
				}
			}	
			else
			{
			?>
			<div id="myModal" class="reveal-modal">
				<div class="login">
				<form action="index.php" method="post" autocomplete="on"	>
					Username:   <input type="text" name="username" size="20" autofocus><p>
					Password:   <input type="password" name="password" size="20"><p>
					<input type="submit" name="Login" value="Login">  
				</form>
				</div>
				<a class="close-reveal-modal">×</a>
				</div>
			<?php
			}
		?>	

</div>

</div>
</div>

<div class="container">
<div id="sliderFrame">
	<div id="slider">
		<a href="http://www.menucool.com/javascript-image-slider" target="_blank">
			<img src="images/image-slider-1.jpg" alt="Welcome to Menucool.com" />
		</a>
		<img src="images/image-slider-2.jpg" alt="" />
		<img src="images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
		<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
		<img src="images/image-slider-5.jpg" />
	</div>
	<div id="htmlcaption" style="display: none;">
		<em>HTML</em> caption. Link to <a href="http://www.google.com/">Google</a>.
	</div>
</div>
</div>

<div class="br"></div>

<div class="footer">
</div>
</html>  

Share this post


Link to post
Share on other sites
Devexz

já leste esta parte do site?

This version of Reveal has been depreciated

Além disso tens de fazer o login através de ajax se não queres que o modal feche-se.

Edited by Devexz

Contador de calorias: caloriaspordia.com

Share this post


Link to post
Share on other sites
Knot

Já consegui resolver!

Até aproveitei e meti o código php a correr primeiro que o html como mandam as regras e já não tenho problemas de header que também me estavam a chatear. O modal reveal apesar de não ser novo e atualizado funciona perfeitamente para o que pretendo (tenho apenas de verificar noutros browsers se está a funcionar!)

<?php
include "init.php";

if(isset($_POST['Login']))
{
$erro=false;
$consulta="Select * from utilizador where username='" . $_POST['username'] . "' and password='" . $_POST['password'] . "'";
$resultado=mysql_query($consulta);

if (mysql_num_rows($resultado)>0)
{	
$linha=mysql_fetch_array($resultado);
$_SESSION['username']=$linha['username'];
$_SESSION['id_utilizador']=$linha['id_utilizador'];

header("location: index.php");
exit();
}
else
{
$erro=true;
}
}
?>
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="css/geral.css" type="text/css"/>
<link rel="stylesheet" href="css/reveal.css" type="text/css"/>
<link rel="stylesheet" href="css/js-image-slider.css" type="text/css" />
<script src="js/js-image-slider.js" type="text/javascript"></script>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="js/jquery.reveal.js" type="text/javascript"></script>
<title>Registo de Apostas Online</title>
</head>
<body>
<div class="topo">
<div class="topocentro">
<div class="menu1">
<ul class="menu">
<li><a href="index.php" class="current">Home<span class="divider"></span></a></li>
<li><a href="noticias.php">Noticias<span class="divider"></span></a></li>
<?php
if (isset($_SESSION['username']))
{
 echo "<li><a href='user.php'>Apostas<span class='divider'></span></a></li>";
 echo "<li><a href='perfil.php'>Perfil</a></li>";
}
else
{
 echo "<li><a href='registar.php'>Registar</a></li>";
}
?>
</ul>
</div>

<div class="login_index">
<?php
if (isset($_SESSION['username']))
{
 echo "Está ligado como " . $_SESSION['username'] ." <a href='logout.php'> Logout</a>";
}
else
{
 echo "Não está ligado. <a href='#' class='big-link' data-reveal-id='myModal' > Login</a>";

 if(isset($erro))
 {
 ?>
 <div id="myModal" class="reveal-modal">
 <div class="login">
 <form action="index.php" method="post" autocomplete="on" >
	 Username:   <input type="text" name="username" size="20" autofocus><p>
	 Password:   <input type="password" name="password" size="20"><p>
	 <input type="submit" name="Login" value="Login">
	 Tente novamente!
 </form>
 </div>
 <a class="close-reveal-modal">×</a>
 </div>
 <script>$('#myModal').reveal($(this).data());</script>
 <?php
 }
 else
 {
 ?>
 <div id="myModal" class="reveal-modal">
 <div class="login">
 <form action="index.php" method="post" autocomplete="on" >
	 Username:   <input type="text" name="username" size="20" autofocus><p>
	 Password:   <input type="password" name="password" size="20"><p>
	 <input type="submit" name="Login" value="Login">
 </form>
 </div>
 <a class="close-reveal-modal">×</a>
 </div>
 <?php
 }
}
?>
</div>
</div>

</div>
</div>
<div class="container">
<div id="sliderFrame">
 <div id="slider">
	 <a href="http://www.menucool.com/javascript-image-slider" target="_blank">
		 <img src="images/image-slider-1.jpg" alt="Welcome to Menucool.com" />
	 </a>
	 <img src="images/image-slider-2.jpg" alt="" />
	 <img src="images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
	 <img src="images/image-slider-4.jpg" alt="#htmlcaption" />
	 <img src="images/image-slider-5.jpg" />
 </div>
 <div id="htmlcaption" style="display: none;">
	 <em>HTML</em> caption. Link to <a href="http://www.google.com/">Google</a>.
 </div>
</div>
</div>
<div class="br"></div>
<div class="footer">
</div>
</html>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.