<button id="click">Click Me</button>
<div id="modal-1">
<h3>This is a Modal</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque hic eligendi, in, ipsa numquam enim expedita excepturi atque maiores optio possimus libero voluptate quibusdam dolore!</p>
<button id="close">Close</button>
</div>
#modal-1{
display:none;
/*default display set to none*/
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:40%;
padding:20px;
font-size:1.2em;
font-weight:bold;
font-family:Monospace;
text-align:center;
background-color:#ffffff3f;
backdrop-filter:blur(5px);
}
/*Other Styling stuffs*/
body{
background:url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80') no-repeat center center fixed;
}
button{
background:green;
border:0;
padding:10px;
border-radius:7px;
font-size:0.7em;
cursor:pointer;
}
#click{
font-size:0.9em;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
const click = document.getElementById('click');
const close = document.getElementById('close');
const modal1 = document.getElementById('modal-1');
// Get Elements
click.addEventListener('click',()=>{
modal1.style.display="block";
click.style.display="none";
});
close.addEventListener('click',()=>{
modal1.style.display="none";
click.style.display="block";
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.