<DOCTYPE html>
<html>
<body>
<head>
<style>
html,body{
margin:0;
padding:0;
font-family:"tahoma";
text-align:center;
}
#open-modal, #close-modal{
background-color:royalblue;
color:white;
padding:15px;
font-size:20px;
cursor:pointer;
}
#modal{
background-color:white;
max-width:600px;
margin:0 auto;
padding:20px;
height:200px;
position:relative;
top:30%;
}
#overlay{
display:none;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:rgba(0,0,0,0.5);
}
</style>
</head>
<div id="overlay">
<div id="modal">
<h2>Contact Details</h2>
<p>Home Simpson 742 Evergreen Terrace (no spam please)</p>
<button id="close-modal">Close</button>
</div>
</div>
<h1>Click to reveal Homers contact Details</h1>
<button id="open-modal">Contact</button>
<script>
document.getElementById("open-modal").addEventListener("click",function(){
document.getElementById("overlay").style.display="block";
})
document.getElementById("close-modal").addEventListener("click",function(){
document.getElementById("overlay").style.display="none";
})
</script>
</body>
</html>
Comments
Post a Comment