modal react

readme.md

usage:

<ModalLink name="Click me!">
  <h1>Hello modal!</h1>
</ModalLink>

modal.jsx

var Modal = React.createClass({
    killClick: function(e) {
        // clicks on the content shouldn't close the modal
        e.stopPropagation();
    },
    componentDidMount: function() {
        ModalCount += 1;
        modalWindowLock();
    },
    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();
        ModalCount -= 1;
        if (ModalCount == 0) {
            modalWindowUnlock();
        }
    },
    render: function() {
        var cls = "modal-content " + (this.props.className || '');
        return (
            <div {...this.props} className={"modal-container " + (this.props.className || '')} onClick={this.handleBackdropClick}>
                <div className={cls} onClick={this.killClick}>
                    <a href="javascript:;" role="button" className="modal-close" onClick={this.handleBackdropClick}></a>
                    {this.props.children}
                </div>
            </div>
        );
    }
});

var ModalLink = React.createClass({
    mixins: [LayerMixin],
    handleClick: function() {
        this.setState({
            show: !this.state.show
        });
    },
    getInitialState: function() {
        return {
            show: false
        };
    },
    close: function() {
        this.setState({
            show: false
        });
    },
    open: function() {
        this.setState({
            show: true
        });
    },
    renderModal: function() {
        return (<div>{this.props.children}</div>);
    },
    renderLayer: function() {
        if (!this.state.show) {
            return <span />;
        }
        var modal = this.renderModal();
        return (<Modal className={this.props.className} onRequestClose={this.handleClick}>{modal}</Modal>);
    },
    render: function() {
        return (
            <a href="javascript:;" role="button" className={this.props.linkClassName || ''} onClick={this.handleClick}>{this.props.name}</a>
        );
    }
});