ReactJs Modal Using Javascript and CSS - Stack Overflow

admin管理员组

文章数量:1302929

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 ponent.

<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> 

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 ponent.

<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> 

• javascript
• css
• dialog
• modal-dialog
• reactjs

Share Follow asked Nov 6, 2014 at 18:51 ShahShah 6311 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

/** @jsx React.DOM */

var ReactLayeredComponentMixin = {
    ponentWillUnmount: function() {
        this._unrenderLayer();
        document.body.removeChild(this._target);
    },
    ponentDidUpdate: function() {
        this._renderLayer();
    },
    ponentDidMount: 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 ponents will stack
        // in mount order).
        this._target = document.createElement('div');
        document.body.appendChild(this._target);
        this._renderLayer();
    },
    _renderLayer: function() {
        // By calling this method in ponentDidMount() and ponentDidUpdate(), 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};
    },
    ponentDidMount: 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);

本文标签： ReactJs Modal Using Javascript and CSSStack Overflow