Do you want to be a good Web Developer?

Enter Your Email To Get Our Exclusive Tutorials
And Offer Right In Your Email

Join TalkersCode Community And Recieve Exclusive Tutorials
On Web Development Right Via Email.

Create A Simple Login Form On Popup Box Using jQuery.

Friday, Jan 6, 2017

Tags:- jQuery HTML CSS PHP MySQL


Login Form in Popup Box is a great way to do Login without redirecting the user to Login page.It provides a great user experiance and save user time.In this tutorial we will help you to create a login form in Popup Box using jQuery.You may also like custom popup box using jQuery and CSS.


See Demo
Image Gallery


To create a Login Form on Popup Box it takes only Four steps:-

  1. Make a HTML file and define markups for Login Form and Popup Box
  2. Make a CSS file and define styling for Login Form and Popup Box
  3. Make a Script file and define Effects for Login Form and Popup Box
  4. Make a PHP file and Do Login


Step 1.Make a HTML file and define markups for Login Form and Popup Box

We make a HTML file and save it with a name login.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="login_style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="login_effect.js"></script>
</head>
   
<body>

<center>
 <input type="button" id="show_login" value="Show Login">
 <div id = "loginform">
  <form method = "post" action = "">
   <p>Join TalkersCode And get Quick Access To Our Tutorials,Questions,Web Tricks And Many More</p>
   <input type = "image" id = "close_login" src = "images/close.png">
   <input type = "text" id = "login" placeholder = "Email Id" name = "uid">
   <input type = "password" id = "password" name = "upass" placeholder = "***">
   <input type = "submit" id = "dologin" value = "Login">
  </form>
 </div>
</center>

</body>
</html>


Step 2.Make a CSS file and define styling for Login and Popup Box

Now we define styling for our Login and Popup Box and save the file with name login_style.css. You may also like login form with shake animation effect.

body
{
 background-color:#BDBDBD;
}
#loginform
{
 width:500px;
 height:330px;
 margin-top:100px;
 background-color:#585858;
 border-radius:3px;
 box-shadow:0px 0px 10px 0px #424242;
 padding:10px;
 box-sizing:border-box;
 font-family:helvetica;
 visibility:hidden;
 display:none;
}
#loginform #close_login
{
 position:absolute;
 top:140px;
 left:735px;
 width:15px;
 height:15px;
}
#loginform p
{
 margin-top:40px;
 font-size:22px;
 color:#E6E6E6;
}
#loginform #login
{
 width:250px;
 height:40px;
 border:2px solid silver;
 border-radius:3px;
 padding:5px;
}
#loginform #password
{
 margin-top:5px;
 width:250px;
 height:40px;
 border:2px solid silver;
 border-radius:3px;
 padding:5px;
}
#loginform #dologin
{
 margin-left:-5px;
 margin-top:10px;
 width:250px;
 height:40px;
 border:none;
 border-radius:3px;
 color:#E6E6E6;
 background-color:grey;
 font-size:20px;
}


Step 3.Make a Script file and define Effects for Login and Popup Box

In this we define effects for our Popup Box using jQuery and save it with a name login_effect.js. You may also like flip animated login and signup form.

$(document).ready(function()
{
 $("#show_login").click(function(){
  showpopup();
 });
 $("#close_login").click(function(){
  hidepopup();
 });
});

function showpopup()
{
 $("#loginform").fadeIn();
 $("#loginform").css({"visibility":"visible","display":"block"});
}

function hidepopup()
{
 $("#loginform").fadeOut();
 $("#loginform").css({"visibility":"hidden","display":"none"});
}


We use fadeIn(); and fadeOut(); effect for showing and hidding the popup box you can use any effect on Popup Box.You can also see our jQuery Effects Tutorial.



Step 4.Make a PHP file and do Login

In this step we make a PHP file and save the file with name dologin.php and recieve login id and password of a user and do login we use PHP for server side processing you can use any sever-side language.You may also like newsletter signup form using jQuery and PHP.

<?php
$id = $_POST['uid'];
$pass = $_POST['upass'];

$host = 'localhost';
$user = 'root';
$pass = ' ';
mysql_connect($host, $user, $pass);
mysql_select_db('demo');

$dologin = "select id,pass from user where id = $id and pass = $pass ";
$result = mysql_query( $dologin );

if($result)
{
 echo "Successfully Logged In";
}
else
{
 echo "Wrong Id Or Password";
}
?>

If the user entered correct Email Id and Password we display Success Message else we display Wrong Id or Password message.You can do validation to make your code more secure or you can view our How to do validation before and after submitting the form tutorial.


That all, this is how to create a Login Form on Popup Box using jQuery.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email