<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;
}
const App = () => {
const [displayModal, setDisplayModal] = React.useState(false);
const [acceptOffer, setAcceptOffer] = React.useState(false);
return (
<div className="App">
{!displayModal ? (
acceptOffer ? (
<span>Offer Accepted </span>
) : (
<button
className="showOfferButton"
onClick={() => {
setDisplayModal(true);
}}
>
{" "}
Show Offer{" "}
</button>
)
) : (
<React.Fragment>
<div className="overlay"></div>
<div className="modal">
<button
className="xButton"
onClick={() => {
setDisplayModal(false);
}}
>
{" "}
x{" "}
</button>
<span className="modalContent">
Click the button to accept our amazing offer!
</span>
<button
className="acceptButton"
onClick={() => {
setAcceptOffer(true);
setDisplayModal(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.