React Modal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//fb.me/react-0.14.5.js"></script>

CSS

html, body, #react_app, #react_app > div {
  height: 100%;
}
.modal-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  justify-content: center;
  color: white;
}

.modal-item {
  align-self: center;
}

img {
  width: 200px;
  height: 200px;
}

.glyphicon {
  font-size: 20px;
  padding: 10px;
  color: white;
  cursor: pointer;
}

.btn {
  margin: 10px;
}

Babel + JSX

/** 
 * App.js
 * Create a custom <Modal/> component to display dynamic content
 */
class App extends React.Component {
  
  constructor(props) {
    super(props);
    // Init state
    this.state = { modalOpen: props.opened, pic: props.welcomePicture};
  }
  
  // Toggle Modal visibility
  toggleModal(pic) {
    const state = this.state.modalOpen;
    // Update state: modal visibility and its content
    this.setState({ modalOpen: !state, pic });
  }
  
  render() {
    const { modalOpen, pic } = this.state;
    return (
      <div>
        { /* Modal */ }
        <MobileModal bg="#222" show={ modalOpen } 
           onClose={ this.toggleModal.bind(this) }>
          <img src={ pic } />
        </MobileModal>
          
        { /* Buttons: open modals */ }
        <button className="btn" 
          onClick={this.toggleModal.bind(this, 'http://lorempixel.com/200/200/business/1')}>
            Business
        </button>
          
        { /* You can also use the arrow functions to call a component method */ }
        <button className="btn" 
          onClick={ () => this.toggleModal('http://lorempixel.com/400/200/nature/1')}>
            Fashion
        </button>
       </div>
    );
  }
}


/** 
 * Reusable Modal Component
 */
class MobileModal extends React.Component {
  render() {
    const { show, bg, closeModal } = this.props;
    // Custom styles: set visibility and backbround color
    const styles = {
      modal: {
        display: (show) ? null : 'none', 
        backgroundColor: bg || 'rgba(255, 255, 255, 0.8)',       
      }
    };
    
    return (
      <div className="modal-wrapper" style={styles.modal}>
        { /* Close Button: invoke callback */ }
        <span className="glyphicon glyphicon-remove-sign modal-item"
            onClick={this.props.onClose}></span>
        { /* Content */ }
        <div className="modal-item">
        	{ this.props.children }
				</div>
      </div>
    )
  }
}