modal reactjs template

                            
import React, { Component } from 'react';
import Modal from 'react-awesome-modal';

export default class Examples extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible : false
        }
    }

    openModal() {
        this.setState({
            visible : true
        });
    }

    closeModal() {
        this.setState({
            visible : false
        });
    }

    render() {
        return (
            <section>
                <h1>React-Modal Examples</h1>
                <input type="button" value="Open" onClick={() => this.openModal()} />
                <Modal 
                    visible={this.state.visible}
                    width="400"
                    height="300"
                    effect="fadeInUp"
                    onClickAway={() => this.closeModal()}
                >
                    <div>
                        <h1>Title</h1>
                        <p>Some Contents</p>
                        <a href="javascript:void(0);" onClick={() => this.closeModal()}>Close</a>
                    </div>
                </Modal>
            </section>
        );
    }
}

View another examples Add Own solution

3.4

Suspectus 105 points

                                    import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};

// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement')

function App(){
  var subtitle;
  const [modalIsOpen,setIsOpen] = React.useState(false);
  function openModal() {
    setIsOpen(true);
  }

  function afterOpenModal() {
    // references are now sync'd and can be accessed.
    subtitle.style.color = '#f00';
  }

  function closeModal(){
    setIsOpen(false);
  }

    return (
      &lt;div&gt;
        &lt;button onClick={openModal}&gt;Open Modal&lt;/button&gt;
        &lt;Modal
          isOpen={modalIsOpen}
          onAfterOpen={afterOpenModal}
          onRequestClose={closeModal}
          style={customStyles}
          contentLabel=&quot;Example Modal&quot;
        &gt;

          &lt;h2 ref={_subtitle =&gt; (subtitle = _subtitle)}&gt;Hello&lt;/h2&gt;
          &lt;button onClick={closeModal}&gt;close&lt;/button&gt;
          &lt;div&gt;I am a modal&lt;/div&gt;
          &lt;form&gt;
            &lt;input /&gt;
            &lt;button&gt;tab navigation&lt;/button&gt;
            &lt;button&gt;stays&lt;/button&gt;
            &lt;button&gt;inside&lt;/button&gt;
            &lt;button&gt;the modal&lt;/button&gt;
          &lt;/form&gt;
        &lt;/Modal&gt;
      &lt;/div&gt;
    );
}

ReactDOM.render(&lt;App /&gt;, appElement);

Thank you! 5