Modale ReactJs che utilizza Javascript e CSS

Question

Come aggiungere la finestra modale reactjs con il tag body end per impostare il posizionamento modale assoluto con il tag body.

Ecco un esempio aggiunto all'interno di un altro componente.

<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

Questo viene in genere definito come "livelli" in risposta. Vedi 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);