 |
| Modal v1.0 with animations |
Pre Loader V4.0
Fully Responsive Login Form V7.0 based on Bootstrap
Here's the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal V1.0 By roundCube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body onload="animate()">
<div id="button" onclick="openModal()"><h2 style="text-align:center;">Click Me</h2></div>
<div id="modal">
<div id="close" onclick="closeModal()">
<div id="line1"></div>
<div id="line2"></div>
</div>
</br>
<h1 style="text-align:center;">Responsive Modal By roundCube</h1>
<p style="text-align:center;"> <a href="http://roundCubee.blogspot.com">roundCubee.blogspot.com</a></p>
</div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>© roundCube</a></p></div>
</body>
<style>
#button{
position: absolute;
top:40%;
left:43%;
height:10%;
width:14%;
background-color:orange;
-webkit-transition:all 0.25s ease-in;
-moz-transition:all 0.25s ease-in 0s;
border-radius: 5px;
color: white;
border-bottom-width: 9px;
border-bottom-style: ridge;
border-bottom-color: orangered;
cursor: pointer;
cursor: hand;
}
#button:hover{
background-color: #ffba3d;
border-bottom-color: #ff5819;
}
#modal{
position: absolute;
top:50%;
left:50%;
height:0px;
width:0px;
background-color: white;
border-style:solid;
border-color:black;
border-radius: 7px;
border-width:0px;
opacity: 0;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease 0s;
}
#close{
position: absolute;
top:10px;
right:10px;
height:50px;
width:50px;
border-radius: 50%;
border-style: solid;
border-color: black;
border-width: 3px;
cursor: pointer;
cursor: hand;
}
#line1{
position: absolute;
top:10%;
height: 80%;
left: 45%;
width:10%;
background-color: black;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari */
transform: rotate(30deg);
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease 0s;
}
#line2{
position: absolute;
top:10%;
height: 80%;
left: 45%;
width:10%;
background-color: black;
-ms-transform: rotate(-39deg); /* IE 9 */
-webkit-transform: rotate(-30deg); /* Safari */
transform: rotate(-30deg);
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease 0s;
}
#copyright{
position: absolute;
bottom:0px;
height:6%;
left:0px;
width:100%;
text-align: center;
}
#copyright a{
color:black;
}
#close:hover #line1{
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
opacity: 0.7;
}
#close:hover #line2{
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate-(45deg); /* Safari */
transform: rotate(-45deg);
opacity: 0.7;
}
</style>
<script>
function openModal(){
var modal = document.getElementById("modal");
modal.style.top="10%";
modal.style.height="80%";
modal.style.left="10%";
modal.style.width="80%";
modal.style.borderWidth="2px";
modal.style.opacity="1";
}
function closeModal(){
var modal = document.getElementById("modal");
modal.style.top="50%";
modal.style.height="0%";
modal.style.left="50%";
modal.style.width="0%";
modal.style.borderWidth="0px";
modal.style.opacity="0";
}
function animate(){
var button = document.getElementById("button");
if(button.style.top!="43%"){
button.style.top="43%";
}
else{
button.style.top="40%";
}
setTimeout("animate()",320);
}
</script>
</html>
If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page
If you like our work please don't remove the hyperlink to our Facebook page.
0 comments: