Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Create A Simple Login Form On Popup Box Using jQuery.

Tuesday, Apr 4, 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.


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

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH

Check Out SEMRUSH