<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";
});