Skip to content

Instantly share code, notes, and snippets.

@emadb

emadb/index.html

Last active September 15, 2016 09:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emadb/def8e97ba245e6a210e1 to your computer and use it in GitHub Desktop.
Save emadb/def8e97ba245e6a210e1 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin - Reactjs bootstrap modal example // source http://jsbin.com/gucuvu/6/edit?html,js,output
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Reactjs bootstrap modal example">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://fb.me/react-with-addons-0.12.2.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-source-javascript" type="text/jsx">
var ModalTrigger = React.createClass({
handleClick: function(e) {
$('#' + this.props.modal).modal();
},
render: function() {
return (
<div onClick={this.handleClick}>
{this.props.children}
</div>);
}
});
var Modal = React.createClass({
componentDidMount: function() {
$(this.getDOMNode()).modal({show: false});
},
componentWillUnmount: function() {
$(this.getDOMNode()).off('hidden');
},
ok: function(){
console.log('ok inside modal');
if (this.props.okCallback){
$(this.getDOMNode()).modal('hide');
this.props.okCallback();
}
},
render: function() {
return (
<div id={this.props.id} className="modal fade">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 className="modal-title">{this.props.title}</h4>
</div>
<div className="modal-body">
{this.props.children}
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" className="btn btn-primary" onClick={this.ok}>Save changes</button>
</div>
</div>
</div>
</div>);
}
});
var Container = React.createClass({
ok: function(){
// Yess!
},
render: function(){
return (<div>
<ModalTrigger modal="myModal">
<button>OpenModal</button>
</ModalTrigger>
<Modal id="myModal" okCallback={this.ok} title="A react modal">
<h2>Content of the modal </h2>
</Modal>
</div>);
}
});
React.render(<Container />, document.body);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment