Today i am going to tell you how to create simple popup box for login or registration or other types of forms.The below image shows how the popup window is looks like, on click the login text it displays the popup window in this window you can put whatever you want, i used this box for my login form.
This is simple and easy to create and also user friendly. This will very helpful to display forms and other contents, This type of popup box also used to reduce the size of the webpages. I hope this post is useful.
This is simple and easy to create and also user friendly. This will very helpful to display forms and other contents, This type of popup box also used to reduce the size of the webpages. I hope this post is useful.
Html for login popup box:
<body>
<div id="black_overlay" style="width: 100%;"> </div>
<div class="san-form">
<img src="images/m_close-icon.png" width="20" height="20" class="close" />
<h3>Login</h3>
<input type="text" id="uname" name="uname" placeholder="User Name">
<input type="password" id="password" name="password" placeholder="Password">
<input type="button" value="Submit" id="submit1">
</div>
<div style="background-color:pink; min-height:860px;">
<p class="Login">Login (Click Here)</p><br/>
<a href="http://wwww.sanwebcorner.com/">wwww.sanwebcorner.com</a>
</div>
</body>
<div id="black_overlay" style="width: 100%;"> </div>
<div class="san-form">
<img src="images/m_close-icon.png" width="20" height="20" class="close" />
<h3>Login</h3>
<input type="text" id="uname" name="uname" placeholder="User Name">
<input type="password" id="password" name="password" placeholder="Password">
<input type="button" value="Submit" id="submit1">
</div>
<div style="background-color:pink; min-height:860px;">
<p class="Login">Login (Click Here)</p><br/>
<a href="http://wwww.sanwebcorner.com/">wwww.sanwebcorner.com</a>
</div>
</body>
Css for Login pop-up box:
body
{
background-color:pink;
}
#black_overlay {
background-color: #333;
left: 0;
opacity: 0.8;
position: absolute;
top: 0;
visibility: hidden;
width: 100%;
z-index: 50;
}
.san-form{
width:320px;
height:280px;
border:1px solid #8E404C;
padding:20px;
background-color:#FFDEE3;
border-radius:3px;
display:none;
text-align:center;
z-index:999;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.close {
float: right;
position: absolute;
right: -8px;
top: -10px;
cursor:pointer;
}
input{
width:92%;
margin:10px 0;
padding:5px;
height:35px;
border-radius:3px;
border: 1px solid #FFBFC9;
}
input#submit1{
width:100%;
margin:10px 15px 10px 0;
padding:5px;
background-color:#8E4F59;
border-radius:3px;
color:#fff;
height:41px;
font-size:16px
}
.Login {
text-align:center;
font-size:20px;
cursor:pointer;
}
{
background-color:pink;
}
#black_overlay {
background-color: #333;
left: 0;
opacity: 0.8;
position: absolute;
top: 0;
visibility: hidden;
width: 100%;
z-index: 50;
}
.san-form{
width:320px;
height:280px;
border:1px solid #8E404C;
padding:20px;
background-color:#FFDEE3;
border-radius:3px;
display:none;
text-align:center;
z-index:999;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.close {
float: right;
position: absolute;
right: -8px;
top: -10px;
cursor:pointer;
}
input{
width:92%;
margin:10px 0;
padding:5px;
height:35px;
border-radius:3px;
border: 1px solid #FFBFC9;
}
input#submit1{
width:100%;
margin:10px 15px 10px 0;
padding:5px;
background-color:#8E4F59;
border-radius:3px;
color:#fff;
height:41px;
font-size:16px
}
.Login {
text-align:center;
font-size:20px;
cursor:pointer;
}
Javascript for login popup box:
$(document).ready(function() {
$(".Login").click(function() {
var h = $("body").height() + 'px';
$("#black_overlay").css({"height":h,"visibility":"visible"});
$(".san-form").css('display','block');
});
$(".close, #submit1").click(function() {
$(".san-form").css('display','none');
$("#black_overlay").css("visibility","hidden");
});
});
$(".Login").click(function() {
var h = $("body").height() + 'px';
$("#black_overlay").css({"height":h,"visibility":"visible"});
$(".san-form").css('display','block');
});
$(".close, #submit1").click(function() {
$(".san-form").css('display','none');
$("#black_overlay").css("visibility","hidden");
});
});
0 Comments