 |
| Simple Login form which popups after the specified time as soon as the page loads |
The code snippet for the form is given below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popups by roundCube</title>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
<![endif]-->
<style>
#container{
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
background-image:url(http://www.jose-ortiz.com/images/blurred_people_bcard.jpg);
background-size:100% 100%;
}
#popUp{
position:absolute;
height:360px;
width:325px;
left:38%;
top:25%;
background-color:white;
z-index:0;
opacity:0;
-webkit-transition:all 1.5s ease;
-moz-transition:all 1.5s ease 0s;
}
#popupImage{
position:absolute;
height:82px;
width:82px;
border-radius:50%;
top:-11%;
left:39%;
background-color:white;
background-image:url(https://scontent-mrs1-1.xx.fbcdn.net/hphotos-xta1/v/t1.0-9/10387305_969118939794326_6462601027113652936_n.jpg?oh=c3d8e25c7f0e1665ca3732f6cdcd5ea1&oe=5610CEE1);
background-size:100% 100%;
box-shadow:0px 4px black;
}
#loginForm{
position:absolute;
top:20%;
height:60%;
left:10%;
width:80%;
}
.formButton{
width:90px;
height:42px;
background-color:#4882f1;
border-color:white;
border-style:none;
border-width:2px;
color:white;
border-radius:0.5px;
cursor: pointer;
cursor: hand;
}
.formButton:hover {
background-color:#0a5af3;
}
::-webkit-input-placeholder {
color: darkgray;
}
:-moz-placeholder { /* Firefox 18- */
color: darkgray;
}
::-moz-placeholder { /* Firefox 19+ */
color: darkgray;
}
:-ms-input-placeholder {
color: darkgray;
}
#submit{
position:absolute;
bottom:1%;
right:2%;
height:16%;
width:33%;
}
#copyright{
position:absolute;
bottom:1%;
right:1%;
color:black;
font-size:10px;
}
a{
text-decoration:none;
color:black;
}
</style>
<script>
function popUpAppear() {
var popUp = document.getElementById("popUp");
if(popUp.style.opacity!="1" && popUp.style.opacity!="0.001")
{
popUp.style.opacity="0.001";
popUp.style.zIndex=500;
}
else if( popUp.style.opacity!="0.002" )
{
popUp.style.opacity="1";
popUp.style.display="block";
}
setTimeout("popUpAppear()",500);
}
</script>
</head>
<body onload="popUpAppear()">
<div id="container">
<div id="popUp">
<a href="https://www.facebook.com/roundCubeInc?fref=ts"><div id="popupImage"></div></a>
<div id="loginForm">
<form action="" method="post">
<br/></br>
<input name="username" type="user" placeholder=" USERNAME " style="width:245px;height:35px;text-align:center;" /><br/>
<br/>
<input type="password" name="password" placeholder="PASSWORD" style="width:245px;height:35px;text-align:center;"><br/>
<br/><br/></br>
<input type="checkbox" name="rememberme" value="yes" >Remember Me
<div id="submit"><input name="submitted" type="submit" value="Submit" class="formButton" style="right:10px;"/></div>
</form>
</div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">roundCube</a></div>
</div>
</div>
</body>
</html>
Feel free to ask for snippets in the comments below or our facebook page
https://www.facebook.com/roundCubeIncIf you like our work please dont remove the hyperlink to our facebook page
Follow Us