Modal

Let's make a modal

by sffriend

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container"></div>

CSS

#container {
  font-family: 'Raleway';
}

.ModalTrigger {
  margin: 40px auto;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 24px;
  background-color: #FF4500;
  border-radius: 8px;
  color: white;
  cursor: pointer;
}

.Modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
}

JavaScript 1.7

class App extends React.Component {
  
  constructor() {
  	this.state = {modal: false};
  }
  
  openModal() {
  	console.log('open modal');
  	this.setState({modal: true});
  }
  
  render() {
  	return (
    	<div className='App'>
      	<ModalTrigger onClick={() => this.openModal()} />
        {this.state.modal && <Modal/>}
      </div>
     );
  }
}

class Modal extends React.Component {
  render() {
  	return (
    	<div className='Modal'>
      	Modal
      </div>
    );	
  }
}

class ModalTrigger extends React.Component {
  render() {
  	return (
    	<div className='ModalTrigger' onClick={this.props.onClick}>
      	Open Modal
      </div>
    );	
  }
}

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

//only click on background to close it
//link inside modal