1                            
2import React, { Component } from 'react';
3import Modal from 'react-awesome-modal';
4
5export default class Examples extends Component {
6    constructor(props) {
7        super(props);
8        this.state = {
9            visible : false
10        }
11    }
12
13    openModal() {
14        this.setState({
15            visible : true
16        });
17    }
18
19    closeModal() {
20        this.setState({
21            visible : false
22        });
23    }
24
25    render() {
26        return (
27            <section>
28                <h1>React-Modal Examples</h1>
29                <input type="button" value="Open" onClick={() => this.openModal()} />
30                <Modal 
31                    visible={this.state.visible}
32                    width="400"
33                    height="300"
34                    effect="fadeInUp"
35                    onClickAway={() => this.closeModal()}
36                >
37                    <div>
38                        <h1>Title</h1>
39                        <p>Some Contents</p>
40                        <a href="javascript:void(0);" onClick={() => this.closeModal()}>Close</a>
41                    </div>
42                </Modal>
43            </section>
44        );
45    }
46}
47                            
48                        

1import React from 'react';
2import ReactDOM from 'react-dom';
3import Modal from 'react-modal';
4
5const customStyles = {
6  content : {
7    top                   : '50%',
8    left                  : '50%',
9    right                 : 'auto',
10    bottom                : 'auto',
11    marginRight           : '-50%',
12    transform             : 'translate(-50%, -50%)'
13  }
14};
15
16// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
17Modal.setAppElement('#yourAppElement')
18
19function App(){
20  var subtitle;
21  const [modalIsOpen,setIsOpen] = React.useState(false);
22  function openModal() {
23    setIsOpen(true);
24  }
25
26  function afterOpenModal() {
27    // references are now sync'd and can be accessed.
28    subtitle.style.color = '#f00';
29  }
30
31  function closeModal(){
32    setIsOpen(false);
33  }
34
35    return (
36      <div>
37        <button onClick={openModal}>Open Modal</button>
38        <Modal
39          isOpen={modalIsOpen}
40          onAfterOpen={afterOpenModal}
41          onRequestClose={closeModal}
42          style={customStyles}
43          contentLabel="Example Modal"
44        >
45
46          <h2 ref={_subtitle => (subtitle = _subtitle)}>Hello</h2>
47          <button onClick={closeModal}>close</button>
48          <div>I am a modal</div>
49          <form>
50            <input />
51            <button>tab navigation</button>
52            <button>stays</button>
53            <button>inside</button>
54            <button>the modal</button>
55          </form>
56        </Modal>
57      </div>
58    );
59}
60
61ReactDOM.render(<App />, appElement);