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:
<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:
{
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:
$(“.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”);
});
});
