 |
| Modal V3.0 |
Have a look at template by us: METROCITY
Here's the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal V3.0 By roundCube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<div id="button" onclick="openModal()">
<h2>Open Modal</h2></div>
<Div id="modal">
<Div id="closeButton" onclick="closeModal()">
<div id="cross1"></div>
<div id="cross2"></div>
</Div>
<div id="modalText"><h1>Hey There!</h1>
<p>Type Random Stuff here</p>
</div>
<div id="modalButton"><h3>Enter The Website</h3></div>
</Div>
</div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>© roundCube</a></p></div>
</body>
<style>
#container{
position: absolute;
top:0px;
left:0px;
height:100%;
width: 100%;
background-image: url(http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg);
background-size: 100% 100%;
}
#button{
position: absolute;
top:27%;
left:43%;
height:50px;
width:200px;
font-family: sans-serif;
-webkit-transition:all 0.7s ease;
color: white;
border-style: solid;
border-color: white;
border-width: 5px;
text-align: center;
}
#copyright{
position: absolute;
top:0px;
height:6%;
left:0px;
width:100%;
text-align: center;
}
#copyright a{
color:white;
text-decoration: none;
}
#button:hover{
background-color: white;
color: black;
cursor: pointer;
}
#modal{
position: absolute;
top:10%;
height:400px;
width:500px;
background-color: rgba(235, 235, 235, 0.9);
left:35%;
visibility: hidden;
opacity:0;
border-radius: 5px;
box-shadow: 1px 1px black;
-webkit-transition:all 0.7s ease;
}
#closeButton{
position: absolute;
top:0px;
left:5%;
height:65px;
width:65px;
background-color: #645e5e;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
cursor: pointer;
}
#modalText{
text-align: center;
position: absolute;
top:15%;
left:10%;
width:80%;
height:60%;
color: gray;
font-family: sans-serif;
}
#modalText h1{
font-size: 50px;
}
#cross1{
position: absolute;
top:9px;
left:30.5px;
height:40px;
width:6px;
background-color: white;
transform: rotate(45deg);
-webkit-transition:all 0.3s ease;
box-shadow: 1px 1px rgba(0,0,0,0.3);
}
#cross2{
position: absolute;
top:9px;
right:30.5px;
height:40px;
width:6px;
background-color: white;
transform: rotate(-45deg);
-webkit-transition:all 0.3s ease;
box-shadow: 1px 1px rgba(0,0,0,0.3);
}
#closeButton:hover #cross1{
transform: rotate(-45deg);
}
#closeButton:hover #cross2{
transform: rotate(45deg);
}
#modalButton{
position: absolute;
bottom:10%;
height:50px;
left:32.5%;
width:35%;
border-color: gray;
border-width: 3px;
border-style:solid;
text-align: center;
-webkit-transition:all 0.5s ease;
cursor: pointer;
font-family: sans-serif;
color: gray;
}
#modalButton:hover{
background-color: gray;
color:white;
}
</style>
<script>
function openModal(){
var modal=document.getElementById("modal");
var button=document.getElementById("button");
modal.style.opacity="1";
modal.style.visibility="visible";
button.style.opacity="0";
}
function closeModal(){
var modal=document.getElementById("modal");
var button=document.getElementById("button");
modal.style.opacity="0";
modal.style.visibility="hidden";
button.style.opacity="1";
}
</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.
![Pinterest](http://pinterest.com/pin/create/button/?url=https://roundcubee.blogspot.com/2015/08/modal-v30.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU2LkpG5Pa1AKN6ZtT1XyWF03DxQPNicfSkCaNSvwHe90i5fd7zhy_kqOpUIgb_iCmJt9iHvvAabGpgw-MSjU9gugVS6J0D2TZ6m0i2prSlpaPMMm8Yno4ITpkwTN2y_nTfP5IvjajtuU/s72-c/modal+v3.png&description= Modal V3.0 Have a look at template by us: METROCITY Here's the code snippet: <!DOCTYPE html> <html lang="en...){kind=link}
0 comments: