Create A Simple Login Form On Popup Box Using jQuery

Last Updated : Jul 1, 2023

IN - jQuery HTML CSS PHP MySQL | Written & Updated By - Pragati

In this tutorial we will help you to create a login form in Popup Box using jQuery, 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.

You may also like custom popup box using jQuery and CSS.

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

Make a HTML file and define markups for Login Form and Popup Box
Make a CSS file and define styling for Login Form and Popup Box
Make a Script file and define Effects for Login Form and Popup Box
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.

I hope this tutorial on popup login form helps you and the steps and method mentioned above are easy to follow and implement.

About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪