<div class="show-offer">
  <button class="button-show">
    Show offer
  </button>
  <div class="modal" status = "false">
    <div class="modal-content">
       <button class="close">X</button>
    <p class = "text">Click the button below to accept our offer</p>
    <button class="accept-offer">Accept Offer</button>
    </div>
   
  </div>
</div>
html, body{
  margin: 0;
  padding: 0;
  background-color: #C39BD3;
  height: 200vh;
}
div.show-offer{
position: absolute;
  top: 50%;
  left: 50%;
}
button.button-show{
  width: auto;
  height: 40px;
  border: none;
  border-radius: 5px;
  color: #6495ED;
  font-weight: 500;
  box-shadow: 2px 2px 1.2px black;
  cursor: pointer;
}
p.button-show{
   top: 50%;
  left: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 30px;
}
div.modal{
  display: none;
  border: 1px solid black;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4); 
}
div.modal-content{
  
  width: 300px;
  height: 300px;
  border: none;
  padding: 20px;
/*  Centering the modal  */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -150px;
/* end of centering   */
  background-color: #BFC9CA;
  border-radius: 10px;
  color: #CB4335;
  font-weight: 800;
   box-shadow: 2px 2px 1.2px black;
}
.close{
  background-color: rgba(0,0,0,0);
  cursor: pointer;
}
p.text{
  margin-top: 120px;
  padding: 5px 5px;
}
.accept-offer{
  margin-top: 40px;
  margin-left: 100px;
  color: #fff;
  font-weight: 500;
  box-shadow: 2px 2px 1.2px black;
  background-color: rgba(0,0,0,0);
  cursor: pointer;
}
/*
* https://frontendeval.com/questions/modal-overlay
*
* Build a modal control and overlay
*/

let showBut = document.querySelector('button.button-show');
if(showBut == null || showBut == undefined){
  console.log("show button not found");
}else{
  showBut.addEventListener(
  "click",
    ()=>{
      if(document.querySelector('.modal') != null){
        document.querySelector('.modal')
      .style.display = "block";
        document.querySelector('.modal').setAttribute('status','true');
        //set event lisetener to close button
        document.querySelector('.close')
        .addEventListener(
        "click",
          ()=>{
            document.querySelector('.modal').setAttribute('status','false');
            document.querySelector('.modal')
      .style.display = "none";
          }
        );
        //set event listener to accept offer
        document.querySelector('.accept-offer')
        .addEventListener(
        "click",
          ()=>{
            document.querySelector('.modal').setAttribute('status','false');
            document.querySelector('.modal')
      .style.display = "none";
            let show = document.querySelector('.button-show');
            let p = document.createElement('p');
            p.classList.add("button-show");
            p.innerText = "Accepted offer";
            document.querySelector('.show-offer').append(p);
            document.querySelector('.modal').parentNode
            .insertBefore(p, document.querySelector('.modal') );
            show.style.display = "none";
            
          }
        );
        //if anywhere outside the modal
        document.querySelector('body').addEventListener(
        "click",
          (event)=>{
            if(
              document.querySelector('.modal')
                .getAttribute('status') === 'true' &&
              event.target.className != "button-show" 
            ){
              
                 document.querySelector('.modal').setAttribute('status','false');
              document.querySelector('.modal')
      .style.display = "none";
              
             
            }
          }
        );
      }
      
    }
  );
}
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.