Pop Up Box LogIn Form / SignUp Form

Login Form 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 popup login form tutorial we will help you to create a login form with Popup Box using jQuery.

Pop Up Box Login Form
Popup Login Page in 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 Popup Login Form

Style.css

/* 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;
}

/* 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;
}

/* 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%;
}

/* 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 Content Box */
.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;
}

/* Add Zoom Animation */
.animate {
animation: zoom 0.6s
}
@keyframes zoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
</style>