Pop Up Boxes

STEP 1 - HTML code


	div class="popup" id="popup1">
	 <div class="overlay"></div>
	 <div class="content">
		  <div class="close-btn" onclick="togglePopup()" >&times;</div>
		  <h1> Popup Title</h1>
		  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
		  Amet aspernatur blanditiis dolor exercitationem harum sint voluptatibus?
		  Dignissimos dolorum, eos et exercitationem in, modi nam necessitatibus quia
		  quod saepe, sapiente similique.
		  
		  </p>
	 </div>
	<button onclick="togglePopup()">Show Popup</button>

STEP 2 - CSS code


	 .popup .overlay{
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100vw;
		  height: 100vh;
		  background: rgba(0,0,0,0.7);
		  z-index: 1;
		  display: none;
	 }
	 .popup .content{
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%) scale(0);
		  background: #fff;
		  width: 450px;
		  height: 220px;
		  z-index: 2;
		  text-align: center;
		  padding: 20px;
		  box-sizing: border-box;
	 }
	 
	 .popup .close-btn{
		  cursor: pointer;
		  position: absolute;
		  right: 20px;
		  top: 20px;
		  width: 30px;
		  height: 30px;
		  background: #222;
		  color: #fff;
		  font-size: 25px;
		  font-weight: 600;
		  line-height: 30px;
		  text-align: center;
		  border-radius: 50%;
	 }
	 
	 .popup.active .overlay{
		  display: block;
	 }
	 
	 .popup.active .content{
		  transition: all 300ms ease-in-out;
		  transform: translate(-50%, -50%) scale(1);
	 }

STEP 3 - JS code


	<script>
		  function togglePopup(){
				document.getElementById("popup1").classList.toggle("active")
		  }
	</script>