<div id="root">
<!-- This element's contents will be replaced with your component. -->
</div>
.App {
font-family: sans-serif;
text-align: center;
}
.modal-container {
z-index: 999;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.7);
}
.modal-content {
width: 80%;
height: 90%;
border: 1px solid #d8dce3;
border-radius: 3px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
background-color: #fdfdfe;
}
function App() {
const [isModalVisible, setIsModalVisible] = React.useState(false);
return (
<div className="App">
<h1>Parent container</h1>
<h3>This is just a demo container</h3>
<button onClick={() => setIsModalVisible(!isModalVisible)}>
open modal
</button>
{isModalVisible && <Modal> Foo </Modal>}
</div>
);
}
function Modal(props) {
return ReactDOM.createPortal(
<div className="modal-container" role="dialog" aria-modal="true">
<div className="modal-content">{props.children}</div>
</div>,
document.body
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
External CSS
This Pen doesn't use any external CSS resources.