React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
                  
</div>

CSS

.main {
  height: 200vh;
  width: 100%;
  
  background-color: red;
}

.modal {
  height: 100%;
  width: 100%;
  position: absolute;
  
  background-color: rgba(0,0,255,0.5);
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  overflow-y: scroll;
  
  height: 45%;
  width: 45%;
}

.modal-header {
  margin-bottom: 500px;
}

Babel + JSX

class App extends React.Component {
	constructor(props) {
  	super(props);
    
    this.state = {
    	showModal: false
    }
  }

	
  render() {
    return (
    		<div className="main">
           {this.state.showModal && (
           		<Modal closeModal={() => this.setState({ showModal: false })} />
           )}
          <button onClick={() => this.setState({ showModal: true })}>Open modal</button>
    		</div>
				
     );
  }
}

class Modal extends React.Component {
	constructor(props) {
  	super(props);
    
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }
	componentDidMount() {
  	document.body.style.overflow = 'hidden';
    document.addEventListener('mousedown', this.handleClickOutside);
  }
  
  componentWillUnmount() {
  	document.removeEventListener('mousedown', this.handleClickOutside);
  	document.body.style.overflow = 'unset';
  }
  
  handleClickOutside(event) {
        const { closeModal } = this.props;

        if (this.modalRef && !this.modalRef.contains(event.target)) {
            closeModal();
        }
    }

	render() {
  	return (
    	<div className='modal'>
    	  
         <div ref={ref => { this.modalRef = ref; }} className='modal-content'>
             <p className="modal-header">scroll me</p>
             <button tabIndex='0' onClick={this.props.closeModal}>Close Modal</button>
         </div>
        
    	</div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);