<div id="app"></div>.App {
font-family: sans-serif;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.modal {
position: relative;
width: 20%;
height: 20%;
border: solid 0.1rem;
padding: 0rem;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background-color: white;
}
.xButton {
padding: 5px 10px;
margin: 5px;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
background: lightgray;
font-size: 13px;
border: none;
}
.modalContent {
margin-top: 2rem;
}
.overlay {
height: 100vh;
width: 100vw;
position: fixed;
background-color: black;
opacity: 0.3;
overflow: hidden;
margin: 0;
}/*
* https://frontendeval.com/questions/modal-overlay
*
* Build a modal control and overlay
*/
const App = () => {
const [isOpen,setIsOpen] = React.useState(false)
const [isAccept,setIsAccept] = React.useState(false)
return(
<div className = "App">
{!isOpen ?(
isAccept?(
<span>Offer Accepted</span>
)
:(
<button onClick = {()=>{setIsOpen(true)}}>{" "}Show Offer{" "}</button>
)
):(
<React.Fragment>
<div className = "overlay"></div>
<div className = "modal">
<button className = "xButton" onClick = {()=>{setIsOpen(false)}}>
{" "}x{" "}</button>
<span className="modalContent">
Click the button to accept our amazing offer!
</span>
<button className = "acceptButton" onClick = {()=>{setIsAccept(true);setIsOpen(false)}}>
Accept Offer {" "}
</button>
</div>
</React.Fragment>
)}
</div>
)
}
ReactDOM.render(<App />, document.getElementById('app'));
External CSS
This Pen doesn't use any external CSS resources.