Login Form in Popup Box is a great way to do Login without redirecting the user to Login page.It provides a great user experience and save user time.In this tutorial we will help you to create a login form in Popup Box using jQuery.
Pop Up Box Login Form
Pop Up Page Html
Popup Signup Form
Modal Login Form
Html Css Popup Box
Popup Login Form Design
Popup Login Form Using Jquery
Login Form Using Javascript
Signup Form Using Jquery
Pop Up Page Html
Popup Signup Form
Modal Login Form
Html Css Popup Box
Popup Login Form Design
Popup Login Form Using Jquery
Login Form Using Javascript
Signup Form Using Jquery
Style.css
<style>
*{margin:0px; padding:0px; font-family:Helvetica, Arial, sans-serif;}
*{margin:0px; padding:0px; font-family:Helvetica, Arial, sans-serif;}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 90%;
padding: 12px 20px;
margin: 8px 26px;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size:16px;
}
input[type=text], input[type=password] {
width: 90%;
padding: 12px 20px;
margin: 8px 26px;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size:16px;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 26px;
border: none;
cursor: pointer;
width: 90%;
font-size:20px;
}
button:hover {
opacity: 0.8;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 26px;
border: none;
cursor: pointer;
width: 90%;
font-size:20px;
}
button:hover {
opacity: 0.8;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
.avatar {
width: 200px;
height:200px;
border-radius: 50%;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
.avatar {
width: 200px;
height:200px;
border-radius: 50%;
}
/* The Modal (background) */
.modal {
display:none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal {
display:none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
/* Modal Content Box */
.modal-content {
background-color: #fefefe;
margin: 4% auto 15% auto;
border: 1px solid #888;
width: 40%;
padding-bottom: 30px;
}
.modal-content {
background-color: #fefefe;
margin: 4% auto 15% auto;
border: 1px solid #888;
width: 40%;
padding-bottom: 30px;
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,.close:focus {
color: red;
cursor: pointer;
}
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
animation: zoom 0.6s
}
@keyframes zoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
</style>
.animate {
animation: zoom 0.6s
}
@keyframes zoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
</style>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block; text-align:center;”
data-ad-layout=”in-article”
data-ad-format=”fluid”
data-ad-client=”ca-pub-7013552742369373″
data-ad-slot=”5323679646″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<ins class=”adsbygoogle”
style=”display:block; text-align:center;”
data-ad-layout=”in-article”
data-ad-format=”fluid”
data-ad-client=”ca-pub-7013552742369373″
data-ad-slot=”5323679646″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
BODY
<body background=”../background1.png”>
<h1 style=”text-align:center; font-size:50px; color:#fff”>Modal Popup Box Login Form</h1>
<button onclick=”document.getElementById(‘modal-wrapper’).style.display=’block'” style=”width:200px; margin-top:200px; margin-left:160px;”>
Open Popup</button>
Open Popup</button>
<div id=”modal-wrapper” class=”modal”>
<form class=”modal-content animate” action=”/action_page.php”>
<div class=”imgcontainer”>
<span onclick=”document.getElementById(‘modal-wrapper’).style.display=’none'” class=”close” title=”Close PopUp”>×</span>
<img src=”1.png” alt=”Avatar” class=”avatar”>
<h1 style=”text-align:center”>Modal Popup Box</h1>
</div>
<span onclick=”document.getElementById(‘modal-wrapper’).style.display=’none'” class=”close” title=”Close PopUp”>×</span>
<img src=”1.png” alt=”Avatar” class=”avatar”>
<h1 style=”text-align:center”>Modal Popup Box</h1>
</div>
<div class=”container”>
<input type=”text” placeholder=”Enter Username” name=”uname”>
<input type=”password” placeholder=”Enter Password” name=”psw”>
<button type=”submit”>Login</button>
<input type=”checkbox” style=”margin:26px 30px;”> Remember me
<a href=”#” style=”text-decoration:none; float:right; margin-right:34px; margin-top:26px;”>Forgot Password ?</a>
</div>
<input type=”text” placeholder=”Enter Username” name=”uname”>
<input type=”password” placeholder=”Enter Password” name=”psw”>
<button type=”submit”>Login</button>
<input type=”checkbox” style=”margin:26px 30px;”> Remember me
<a href=”#” style=”text-decoration:none; float:right; margin-right:34px; margin-top:26px;”>Forgot Password ?</a>
</div>
</form>
</div>
SCRIPT
<script>
// If user clicks anywhere outside of the modal, Modal will close
// If user clicks anywhere outside of the modal, Modal will close
var modal = document.getElementById(‘modal-wrapper’);
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = “none”;
}
}
</script>
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = “none”;
}
}
</script>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block; text-align:center;”
data-ad-layout=”in-article”
data-ad-format=”fluid”
data-ad-client=”ca-pub-7013552742369373″
data-ad-slot=”5323679646″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<ins class=”adsbygoogle”
style=”display:block; text-align:center;”
data-ad-layout=”in-article”
data-ad-format=”fluid”
data-ad-client=”ca-pub-7013552742369373″
data-ad-slot=”5323679646″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Download Project: https://drive.google.com/open?id=110fQjuzucD37tYNy7alM_9NN6bdUm66r
Watch Tutorial: https://youtu.be/yafNKsqZ4cA
By: YT Solution YouTube Channel
