<body>
<main>
<button id="showOffer" class="active">Show Offer</button>
<p id="offerAccepted">Offer accepted</p>
<div id="overlay">
<div class="modal">
<button id="close">x</button>
<h2>Click the button below to accept out amazing offer!</h2>
<button id="acceptOffer">Accept offer</button>
</div>
</div>
</main>
</body>@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap');
body,*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Red Hat Display", sans-serif;
background-color:#F1E3E4;
}
main{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
}
#showOffer,#offerAccepted{
display:none;
}
#showOffer.active, #offerAccepted.active{
display:block;
}
#showOffer{
background-color:#1C1D21;
color:#fff;
}
#overlay{
visibility:hidden;
pointer-events:none;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
background-color:rgba(255,255,255,0.5);
display:flex;
justify-content:center;
align-items:center;
transition:0.2s ease;
opacity:0;
}
#overlay.active{
visibility:visible;
opacity:1;
pointer-events:auto;
}
.modal{
position:relative;
text-align:center;
width:30vw;
min-height:30vh;
border-radius:10px;
background-color:#A288A6;
padding:25px;
}
.modal>*{
background-color:inherit;
}
button{
padding:10px;
border:none;
border-radius:10px;
}
button:hover{
cursor:pointer;
}
#close{
position:absolute;
top:0;
left:0;
border:none;
background-color:transparent;
}
#acceptOffer{
margin-top:15px;
background-color:#F1E3E4;
}/*
* https://frontendeval.com/questions/modal-overlay
*
* Build a modal control and overlay
*/
let modal = document.querySelector("#modal")
let closeButton = document.querySelector("#close")
let acceptOfferButton = document.querySelector("#acceptOffer")
let overlay = document.querySelector("#overlay")
let showOfferButton= document.querySelector("#showOffer")
let offerAcceptedText = document.querySelector("#offerAccepted")
const acceptOffer = () =>{
overlay.classList.remove("active")
showOfferButton.classList.remove("active")
offerAcceptedText.classList.add("active")
}
const closeFromClick = (e) =>{
if(e.target !== overlay && e.target !== closeButton) return
overlay.classList.remove("active")
}
const closeFromKey = (e)=>{
if(e.key !== "Escape") return
overlay.classList.remove("active")
}
const open = () =>{
overlay.classList.add("active")
}
overlay.addEventListener("click", closeFromClick)
closeButton.addEventListener("click", closeFromClick)
showOfferButton.addEventListener("click", open)
acceptOfferButton.addEventListener("click", acceptOffer)
document.addEventListener("keyup", closeFromKey)
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.