<div id="container">
  <div class="offer-button-container">
    <button class="show-offer-btn">Show Offer</button>
    <p class="only-para hidden">Offer Accepted!</p>  
  </div>
  <div class="modal-container hidden">
    <div class="modal">
      <button class="modal-close">X</button>
      <div class="modal-content">
        Click the button below to <br/>accept
        our amazing offer!
      </div>
      <button class="modal-button">Accept Offer</div>
    </div>
  </div>
</div>
*,*::before,*::after {
  box-sizing:border-box;
}
body {
  margin:0;
  position:relative;
}
.offer-button-container {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}
.modal-container {
  height:100vh;
  width:100vw;
  position:fixed;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:rgb(0,0,0,0.5);
/*   z-index:10; */
/*   positon:absolute; */
}
.modal {
  min-width:250px;
  max-width:450px;
  width:30%;
  background-color:#fff;
  padding:25px;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}
.modal-close {
  position:absolute;
  top:5px;
  left:5px;
  border:none;
  cursor:pointer;
  background:transparent;
}

.hidden {
  display:none;
}

.modal-button{
  cursor:pointer;
}


class Modal {
  constructor(cb){
    this.cb = cb
    const closeModalBtn = document.querySelector(".modal-close")
   this.overlayModal = document.querySelector(".modal-container")
    
    this.showOfferBtn = document.querySelector(".show-offer-btn")
    
     this.showOfferBtnContainer = document.querySelector(".offer-button-container")
 
   this.showOfferBtn.addEventListener("click",this.openModal.bind(this))
    closeModalBtn.addEventListener("click",this.closeModal.bind(this))
    this.overlayModal.addEventListener("click",this.closeModal.bind(this))
  
 const modalBox = document.querySelector(".modal")
 const modalBtn = document.querySelector(".modal-button")
   modalBox.addEventListener("click",this.handleModalInsideClick)
    modalBtn.addEventListener("click",this.handleSubmit)
    
  }
  
  closeModal(){
    this.overlayModal.classList.add("hidden")
    this.showOfferBtn.classList.remove("hidden")
    this.showOfferBtnContainer.classList.remove("hidden")
  }
  openModal(){
    this.overlayModal.classList.remove("hidden")
    this.showOfferBtn.classList.add("hidden")
    this.showOfferBtnContainer.classList.add("hidden")
  }
    handleModalInsideClick = (e)=>{
      e.stopPropagation()
    }
  handleSubmit = ()=>{
    this.closeModal()
    this.cb()
  }
}
  
  
 const modal = new Modal(()=> {
   const elBtn = document.querySelector(".show-offer-btn")
   elBtn.classList.add("hidden")
   const para = document.querySelector(".only-para")
   para.classList.remove("hidden")
 })
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.