Popup login forms are the very good way to present your site without redirecting to Login page. In this posts we will help you how to create popup login form by using jQuery.
Here, we explained how to create popup login form:
Step 2 : Create a CSS file and define styling for Login Box.
style.css
Here, we explained how to create popup login form:
- Login Popup form appear at exact center of screen.
- Login form appear on click event of a Login button or any link.
Please see below screenshots :
- Login button screen
- Popup Box Screen
For creating a Popup Login Form please takes below steps:-
Step 1 : First create a login HTML or PHP file as per your site.
login.html or login.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="login_effect.js"></script>
</head>
<body>
<h2>Popup Login Form</h2>
<button onclick="document.getElementById('logid').style.display='block'">Login</button>
<div id="logid" class="popup">
<form name= "login" class="popup-content animate" action="login.php" method="post">
<div class="popupcontainer">
<span onclick="document.getElementById('logid').style.display='none'" class="close" title="Close popup">×</span>
<h3>Login</h3>
</div>
<div class="container">
<label for="username">Username</label>
<input type="text" placeholder="Username" name="username" required>
<label for="password">Password</label>
<input type="password" placeholder="Password" name="password" required>
<button type="submit">Login</button><br>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#F0F0F0">
<button type="button" onclick="document.getElementById('logid').style.display='none'" class="cbtn">Cancel</button>
</div>
</form>
</div>
</body>
</html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="login_effect.js"></script>
</head>
<body>
<h2>Popup Login Form</h2>
<button onclick="document.getElementById('logid').style.display='block'">Login</button>
<div id="logid" class="popup">
<form name= "login" class="popup-content animate" action="login.php" method="post">
<div class="popupcontainer">
<span onclick="document.getElementById('logid').style.display='none'" class="close" title="Close popup">×</span>
<h3>Login</h3>
</div>
<div class="container">
<label for="username">Username</label>
<input type="text" placeholder="Username" name="username" required>
<label for="password">Password</label>
<input type="password" placeholder="Password" name="password" required>
<button type="submit">Login</button><br>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#F0F0F0">
<button type="button" onclick="document.getElementById('logid').style.display='none'" class="cbtn">Cancel</button>
</div>
</form>
</div>
</body>
</html>
Step 2 : Create a CSS file and define styling for Login Box.
style.css
body {font-family: Arial, Helvetica, sans-serif;}
input[type=text], input[type=password] {
width: 100%;
padding: 10px 18px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.popupcontainer {
text-align: center;
margin: 20px 0 10px 0;
position: relative;
}
.container {
padding: 15px;
}
/* Style for buttons */
button {
background-color: #3399cc;
color: white;
border: none;
padding: 10px 18px;
margin: 10px 0;
cursor: pointer;
}
button:hover {
opacity: 0.8;
}
.cbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* The popup (background) */
.popup {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
padding-top: 50px;
}
/* popup Box */
.popup-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
border: 1px solid #ccc;
width: 50%;
}
span.password {
float: right;
padding-top: 15px;
}
/* Style for the Close Button */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/* style for Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
.close:hover,
.close:focus {
cursor: pointer;
}
input[type=text], input[type=password] {
width: 100%;
padding: 10px 18px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.popupcontainer {
text-align: center;
margin: 20px 0 10px 0;
position: relative;
}
.container {
padding: 15px;
}
/* Style for buttons */
button {
background-color: #3399cc;
color: white;
border: none;
padding: 10px 18px;
margin: 10px 0;
cursor: pointer;
}
button:hover {
opacity: 0.8;
}
.cbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* The popup (background) */
.popup {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
padding-top: 50px;
}
/* popup Box */
.popup-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
border: 1px solid #ccc;
width: 50%;
}
span.password {
float: right;
padding-top: 15px;
}
/* Style for the Close Button */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/* style for Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
.close:hover,
.close:focus {
cursor: pointer;
}
Step 3 : Create a Script file to open the popup login form window.
Please use the following script to close the popup window. Its closing by three way like by clicking anywhere outside of the content, by using the "x" button or below "cancel" button to close it.
<script>
// Login form popup
var popup = document.getElementById('logid');
window.onclick = function(event) {
if (event.target == popup) {
popup.style.display = "none";
}
}
</script>
// Login form popup
var popup = document.getElementById('logid');
window.onclick = function(event) {
if (event.target == popup) {
popup.style.display = "none";
}
}
</script>
Now its ready Popup Login Form. Thats it.
No comments:
Post a Comment