ducin/bbmodal.js

## bbmodal.js
var MainView = Backbone.View.extend({
    el: 'body',
    events: {
        'click #open': 'openModal'
    },
    template: '<a id="open" class="btn">open modal</a>',
    openModal: function() {
        var view = new ModalView();
        var modal = new Backbone.BootstrapModal({
            content: view,
            title: 'modal header',
            animate: true
        });
        modal.open(function(){ console.log('clicked OK') });
    },
    render: function() {
        this.$el.html(this.template);
        return this;
    }
});

var ModalView = Backbone.View.extend({
    tagName: 'p',
    template: 'this is modal content',
    render: function() {
        this.$el.html(this.template);
        return this;
    }
});

$(document).ready(function() {
    var mainView = new MainView();
    mainView.render();
});

## index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/transitional.dtd">
<html>
    <head>
        <title>Backbone Bootstrap Modal demo</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
        <script type="text/javascript" src="https://rawgithub.com/powmedia/backbone.bootstrap-modal/master/src/backbone.bootstrap-modal.js"></script>
        <script type="text/javascript" src="bbmodal.js"></script>
    </head>
    <body>
    </body>
</html>
	var MainView = Backbone.View.extend({
	el: 'body',
	events: {
	'click #open': 'openModal'
	},
	template: '<a id="open" class="btn">open modal</a>',
	openModal: function() {
	var view = new ModalView();
	var modal = new Backbone.BootstrapModal({
	content: view,
	title: 'modal header',
	animate: true
	});
	modal.open(function(){ console.log('clicked OK') });
	},
	render: function() {
	this.$el.html(this.template);
	return this;
	}
	});

	var ModalView = Backbone.View.extend({
	tagName: 'p',
	template: 'this is modal content',
	render: function() {
	this.$el.html(this.template);
	return this;
	}
	});

	$(document).ready(function() {
	var mainView = new MainView();
	mainView.render();
	});
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/transitional.dtd">
	<html>
	<head>
	<title>Backbone Bootstrap Modal demo</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
	<script type="text/javascript" src="https://rawgithub.com/powmedia/backbone.bootstrap-modal/master/src/backbone.bootstrap-modal.js"></script>
	<script type="text/javascript" src="bbmodal.js"></script>
	</head>
	<body>
	</body>
	</html>