<div id="app-root"></div>
<div id="modal-root"></div>
#modal-root {
  position: relative;
  z-index: 999;

.app {
  height: 10em;
  width: 10em;
  background: lightblue;
  overflow: hidden;

.modal {
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
// These two containers are siblings in the DOM
const appRootEl = document.getElementById('app-root');
const modalRootEl = document.getElementById('modal-root');

// Let's create a Modal component that is an abstraction around
// the portal API.
class Modal extends React.Component {
  constructor(props) {
    // Create a div that we'll render the modal into. Because each
    // Modal component has its own element, we can render multiple
    // modal components into the modal container.
    this.el = document.createElement('div');

  componentDidMount() {
    // Append the element into the DOM on mount. We'll render
    // into the modal container element (see the HTML tab).

  componentWillUnmount() {
    // Remove the element from the DOM when we unmount
  render() {
    // Use a portal to render the children into the element
    return ReactDOM.createPortal(
      // Any valid React child: JSX, strings, arrays, etc.
      // A DOM element

// The Modal component is a normal React component, so we can
// render it wherever we like without needing to know that it's
// implemented with portals.
class App extends React.Component {
  constructor(props) {
    this.state = {showModal: false};
    this.handleShow = this.handleShow.bind(this);
    this.handleHide = this.handleHide.bind(this);

  handleShow() {
    this.setState({showModal: true});
  handleHide() {
    this.setState({showModal: false});

  render() {
    // Show a Modal on click.
    // (In a real app, don't forget to use ARIA attributes
    // for accessibility!)
    const modal = this.state.showModal ? (
        <div className="modal">
            With a portal, we can render content into a different
            part of the DOM, as if it were any other React child.
          This is being rendered inside the #modal-container div.
          <button onClick={this.handleHide}>Hide modal</button>
    ) : null;

    return (
      <div className="app">
        This div has overflow: hidden.
        <button onClick={this.handleShow}>Show modal</button>

const root = ReactDOM.createRoot(appRootEl);
root.render(<App />);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react/umd/react.development.js
  2. https://unpkg.com/react-dom/umd/react-dom.development.js