bsummer4/gist:f02d0c2832dc90c96c1c

## gistfile1.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
  </head>
  <body>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/JSXTransformer.js"></script>

    <div id="test"></div>

    <script type="text/jsx">
      /** @jsx React.DOM */

      var ModalTrigger = React.createClass(
        { handleClick: function(e) {
            $(this.refs.payload.getDOMNode()).modal(); }

        , render: function() {
            return <div onClick={this.handleClick}>
                     {this.props.trigger}
                     <Modal ref="payload"
                       header={this.props.header}
                       body={this.props.body}
                       footer={this.props.footer}
                       />
                   </div> }
        })


      var Modal = React.createClass(
        { componentDidMount: function() {
            $(this.getDOMNode()).modal({ background: true
                                       , keyboard: true
                                       , show: false
                                       })}

        , componentWillUnmount: function(){
            $(this.getDOMNode()).off('hidden'); }

        , handleClick: function(e) {
            e.stopPropagation(); }

        , render: function() {
            console.log(this.props)

            return (<div onClick={this.handleClick} className="modal fade" role="dialog" aria-hidden="true">
                      <div className="modal-dialog">
                        <div className="modal-content">
                          <div className="modal-header">{this.props.header}</div>
                          <div className="modal-body">{this.props.body}</div>
                          <div className="modal-footer">{this.props.footer}</div>
                        </div>
                      </div>
                    </div>) }
        });


      var Btn = React.createClass({
        render: function() {
          var aProps = {className: "btn btn-default", href:"#"}

          for (k in this.props) {
            if (k != "className") aProps[k] = this.props[k]
            else aProps[k] =  (aProps[k] + " " + this.props[k])
          }

          return React.DOM.a(aProps) }})


      var Icon = React.createClass({
        render: function() { return <i className={"fa fa-" + this.props.fa} /> }})

      var Test = React.createClass({
        render: function() {
          return <ModalTrigger
            trigger={<Btn><Icon fa="gear"/> Modal</Btn>}
            header={<h3>A Modal</h3>}
            footer={<Btn data-dismiss="modal"><Icon fa="check"/> OK</Btn>}
            body={<span>This is the body of the modal.</span>}
            /> }})

      React.renderComponent(<Test/>, document.getElementById('test'))
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
	</head>
	<body>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/JSXTransformer.js"></script>

	<div id="test"></div>

	<script type="text/jsx">
	/** @jsx React.DOM */

	var ModalTrigger = React.createClass(
	{ handleClick: function(e) {
	$(this.refs.payload.getDOMNode()).modal(); }

	, render: function() {
	return <div onClick={this.handleClick}>
	{this.props.trigger}
	<Modal ref="payload"
	header={this.props.header}
	body={this.props.body}
	footer={this.props.footer}
	/>
	</div> }
	})


	var Modal = React.createClass(
	{ componentDidMount: function() {
	$(this.getDOMNode()).modal({ background: true
	, keyboard: true
	, show: false
	})}

	, componentWillUnmount: function(){
	$(this.getDOMNode()).off('hidden'); }

	, handleClick: function(e) {
	e.stopPropagation(); }

	, render: function() {
	console.log(this.props)

	return (<div onClick={this.handleClick} className="modal fade" role="dialog" aria-hidden="true">
	<div className="modal-dialog">
	<div className="modal-content">
	<div className="modal-header">{this.props.header}</div>
	<div className="modal-body">{this.props.body}</div>
	<div className="modal-footer">{this.props.footer}</div>
	</div>
	</div>
	</div>) }
	});


	var Btn = React.createClass({
	render: function() {
	var aProps = {className: "btn btn-default", href:"#"}

	for (k in this.props) {
	if (k != "className") aProps[k] = this.props[k]
	else aProps[k] = (aProps[k] + " " + this.props[k])
	}

	return React.DOM.a(aProps) }})


	var Icon = React.createClass({
	render: function() { return <i className={"fa fa-" + this.props.fa} /> }})

	var Test = React.createClass({
	render: function() {
	return <ModalTrigger
	trigger={<Btn><Icon fa="gear"/> Modal</Btn>}
	header={<h3>A Modal</h3>}
	footer={<Btn data-dismiss="modal"><Icon fa="check"/> OK</Btn>}
	body={<span>This is the body of the modal.</span>}
	/> }})

	React.renderComponent(<Test/>, document.getElementById('test'))
	</script>
	</body>
	</html>