DialogBox.jsx

## DialogBox.jsx
// jshint asi: true
var DialogBox = React.createClass({
  getInitialState: function(){
    return {
      open: false
    }
  },
  render: function(){
    var classes = ['modal', 'fade', this.state.open && 'in'].join(' ')
    var styles = {
      closed: {},
      open: {display: 'block'}
    }
    var actions = this._getActionsContainer(this.props.actions)
    return (
      <div className={classes} style={_.extend(styles.closed, this.state.open && styles.open)}>
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <button className="close" onClick={this.dismiss}><span>&times;</span></button>
              <h4 className="modal-title">{this.props.title}</h4>
            </div>
            <div className="modal-body">
              {this.props.children}
            </div>
            {actions}
          </div>
        </div>
      </div>
    )
  },
  _getAction: function(options, key){
    return (<button onClick={options.onClick.bind(this)} className={options.classes} key={key}>{options.label}</button>)
  },
  _getActionsContainer: function(actionObjects){
    var actions = actionObjects.map(function(action, key){
      return this._getAction(action, key)
    }.bind(this))
    return (
      <div className="modal-footer">
        {actions}
      </div>
    )
  },
  dismiss: function(){
    this.setState({open: false}, function(){
      if (typeof this.props.onDismiss == 'function'){
        this.props.onDismiss.call(this)
      }
    }.bind(this))
  },
  open: function(){
    this.setState({open: true}, function(){
      if (typeof this.props.onOpen == 'function'){
        this.props.onOpen.call(this)
      }
    }.bind(this))
  },
  isOpen: function(){
    return this.state.open
  }
})

## use.jsx
var props = {
  title: "Complete Your Profile",
  classes: 'extra class',
  onDismiss: function(){
    // `this` = Component
  },
  onOpen: function(){
    // `this` = Component
  },
  actions: [
    {
      label: 'OK',
      classes: 'btn btn-primary',
      onClick: function(e){
        this.dismiss() // `this` = Component
      }
    }
  ]
}

<DialogBox {...props}>
  Children Go Here
</DialogBox>