<div class="container">
<button id="modal-opener">
  Show offer
</button>
  <div class="overlay">
   
    <div class="modal">
      <div class="modal-header">
        <button id="cross-button">x</button>
      </div>
      <div class="modal-content">
      <p>
        Click the button below to accept our amazing offer
      </p>
      </div>
      <div class="modal-actions">
        <button id="accept-offer">Accept Offer</button>
      </div>
    </div>
  </div>
</div>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.overlay {
  position: fixed;
   z-index: 999;
  background-color: rgba(0,0,0,0.4);
   width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
    
}

.modal {
  background-color: white;
  padding: 8px;
    border-radius: 8px;
}

.hidden {
  display: none;
}

.modal-header {
  padding: 4px;
}

.modal-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
}

.modal-actions {
   display: flex;
  justify-content: center;
  align-items: center;
}
/*
* https://frontendeval.com/questions/modal-overlay
*
* Build a modal control and overlay
*/
let modalOverlay = document.querySelector(".overlay");
let showOfferButton = document.querySelector("#modal-opener");
let crossButton = document.querySelector("#cross-button");
let acceptOffer = document.querySelector("#accept-offer");
const modalContainer = document.querySelector(".modal-container");

const offerShownMessageP = document.createElement("p");
const textNode = document.createTextNode("Offer Accepted");
offerShownMessageP.append(textNode);


// initially modal is hidden
modalOverlay.classList.add("hidden");

showOfferButton.addEventListener("click", (e) => {
  modalOverlay.classList.remove("hidden");
});

crossButton.addEventListener("click", (e) => {
  modalOverlay.classList.add("hidden");
});

acceptOffer.addEventListener("click", (e) => {
   modalOverlay.classList.add("hidden");
  showOfferButton.replaceWith(offerShownMessageP);
});


modalOverlay.addEventListener("click", (e) => {
//   check if modal-container is not clicked
  console.log("test event>>", e);
 
 if (e.target === modalOverlay) {
    modalOverlay.classList.add("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.