Description:- Through this example you can easily make your own custom popup Login form through jQuery. I’m using this popup Login box for my website.
So, for this example you need to save three files in the same folder in which you are going to save your HTML file.
1. jquery-1.11.1.min.js
2. bootstrap.min.js
3. bootstrap.min.css
In this example the name of my HTML document is light_box.html.
First look at the output…
<!doctype html>
<html>
<head>
<style>
*{padding:0px; margin:0px;}
.loginInfo{background:#fbfbfb; width:400px;height:auto; border-radius:5px; padding-bottom:30px; display:none; position:fixed; top:100px; left:500px; z-index:99999; text-align:center;}
.loginInfo a:hover{background:#e90d0d; color:rgba(255,255,255,1); text-decoration:none;}
#logindiv label{position:relative;position:relative; right:105px; font-family:Roboto; font-size:16px; color:#7d7d7d; font-weight:500; padding-top:5px;}
#logindiv input[type='submit']{position:relative;}
.form{padding:10px 20px 10px 20px; background:rgba(255,255,255,1);width:80%; height:auto; margin-top:50px; border:1px solid #e6e6e6; box-shadow:0px 0px 10px #e6e6e6; border-radius:5px; margin-left:35px;}
.hdng{font-family:Roboto; font-size:1.8em; font-weight:700; color:#296e8f; position:relative; top:30px;}
.loginInfo a{text-decoration:none; cursor:pointer; background:rgba(51,51,51,1); padding:5px 10px; border-radius:50%;
color:rgba(255,255,255,1); font-weight:bold; font-size:12px; position:absolute; top:5px; right:10px; box-shadow: 0px 0px 10px #CCCCCC; color:rgba(255,255,255,1);}
#mask{display:none; background:rgba(0,0,0,1); position:fixed; left:0; top:0; width:100%; height:100%;
z-index:88888; opacity:.95;}
.login{font-size:20px; margin-left:150px ;margin-top:150px ;}
</style>
<title>Popup light box</title>
<link rel="stylesheet" href="bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<a id="logclick" href="#logindiv" class="login">Click Me</a>
<div id="logindiv" class="loginInfo">
<span class="hdng">Login Form (members only)</span><!--ENF of hdng-->
<form action="#" class="form " role="form" id="login" method="post">
<a class="cancel" id="cancelLog">X</a>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="uname" class="form-control" name="uname"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="pass" class="form-control" name="pass"/>
</div>
<div class="form-group">
<input type="submit" name="login" class="btn btn-primary" value="Login" />
</div>
</form>
</div><!--END of logindiv-->
</body>
</html>
<script>
// JS for popup goes from here
$(document).ready(function(e) {
$('a.login').click(function(e) {
var popupBox = $(this).attr('href');
$(popupBox).fadeIn(400);
var popMargTop = ($(popupBox).height()+24) / 2;
var popMargLeft = ($(popupBox).width()+24) / 2;
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(400);
return false;
});
$('#cancelLog').click(function(e){
$('#mask, .loginInfo').fadeOut(400);
return false;
});
});
// Making function for esc button. In case if anyone press esc button then it will also disappers
$(document).keyup(function(e){
if(e.keyCode == 27){
$('#mask, .loginInfo').fadeOut(400);
return false;
}
});
</script>
*Note:- Copy and paste the above code and link those 3 files and see the magic 😉
webtechball 
🙂 nice one
LikeLike
nice…….
LikeLike
Thanks for the appreciation.
LikeLike