-
-
Save carlohcs/0215330202d5e6f4e32b to your computer and use it in GitHub Desktop.
Simple Example using ReactJS to manage Bootstrap Modals.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment