Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Create A Simple Login Form On Popup Box Using jQuery.

Thursday, Sep 28, 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.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.