ReactJs Modal Using Javascript and CSS

Question

How to append reactjs modal window with body end tag to set the modal positioning absolute with body tag.

Here is example added inside the another component.

<div className="modal">
  <p>Model Pop-up <button onClick={this.handleClick}>here</button></p>
    <div id="js-modal-inner" className="modal">
      <div className="modal__content js-dialog">
        <a className="modal__close" onClick={this.handleClose}>&times;</a>
        <header className="modal__header">
          <h2 className="modal__title">Split Ticket:</h2>
        </header>
        <div className="modal__content--inner">
          {this.props.children}
        </div>
      </div>
    </div>
    <div className="modal__overlay js-fade"></div>
  </div> 

Answer 1

This is usually referred to as 'layers' in react. See this fiddle

/** @jsx React.DOM */

var ReactLayeredComponentMixin = {
    componentWillUnmount: function() {
        this._unrenderLayer();
        document.body.removeChild(this._target);
    },
    componentDidUpdate: function() {
        this._renderLayer();
    },
    componentDidMount: function() {
        // Appending to the body is easier than managing the z-index of everything on the page.
        // It's also better for accessibility and makes stacking a snap (since components will stack
        // in mount order).
        this._target = document.createElement('div');
        document.body.appendChild(this._target);
        this._renderLayer();
    },
    _renderLayer: function() {
        // By calling this method in componentDidMount() and componentDidUpdate(), you're effectively
        // creating a "wormhole" that funnels React's hierarchical updates through to a DOM node on an
        // entirely different part of the page.
        React.renderComponent(this.renderLayer(), this._target);
    },
    _unrenderLayer: function() {
        React.unmountComponentAtNode(this._target);
    }
};

var Modal = React.createClass({
    killClick: function(e) {
        // clicks on the content shouldn't close the modal
        e.stopPropagation();
    },
    handleBackdropClick: function() {
        // when you click the background, the user is requesting that the modal gets closed.
        // note that the modal has no say over whether it actually gets closed. the owner of the
        // modal owns the state. this just "asks" to be closed.
        this.props.onRequestClose();
    },
    render: function() {
        return this.transferPropsTo(
            <div className="ModalBackdrop" onClick={this.handleBackdropClick}>
                <div className="ModalContent" onClick={this.killClick}>
                    {this.props.children}
                </div>
            </div>
        );
    }
});

var ModalLink = React.createClass({
    mixins: [ReactLayeredComponentMixin],
    handleClick: function() {
        this.setState({shown: !this.state.shown});
    },
    getInitialState: function() {
        return {shown: false, ticks: 0, modalShown: false};
    },
    componentDidMount: function() {
        setInterval(this.tick, 1000);
    },
    tick: function() {
        this.setState({ticks: this.state.ticks + 1});
    },
    renderLayer: function() {
        if (!this.state.shown) {
            return <span />;
        }
        return (
            <Modal onRequestClose={this.handleClick}>
                <h1>Hello!</h1>
                Look at these sweet reactive updates: {this.state.ticks}
            </Modal>
        );
    },
    render: function() {
        return <a href="javascript:;" role="button" onClick={this.handleClick}>Click to toggle modal</a>;
    }
});

React.renderComponent(<ModalLink />, document.body);