Skip to content
Bootstrap Modal wrapper for use with Backbone.
Find file
Latest commit 6322100 @powmedia Merge pull request #58 from jmmk/unspecified-content
Fix error when content wasn't set


  • Takes care of instantiation and opening/closing modals
  • Manages multiple modals
  • Adds several options
  • Removes the element from the DOM when closed


var view = new Backbone.View({...});

var modal = new Backbone.BootstrapModal({ content: view }).open();



The user dismissed the modal (e.g. pressed cancel or Esc etc.)


The user clicked OK


Fired when the modal has finished animating in


Fired when the modal has finished animating out

Events in the view

You can listen to the events triggered by the modal inside the Backbone.View

var MyView = Backbone.View.extend({
    initialize: function () {
        this.bind("ok", okClicked);

    okClicked: function (modal) {
        alert("Ok was clicked");

var view = new MyView();

var modal = new Backbone.BootstrapModal({ content: view }).open();


new Backbone.BootstrapModal(options)

Set up the modal with the following options:

  • {String|View} [options.content] Modal content. Default: none
  • {String} [options.title] Title. Default: none
  • {String} [options.okText] Text for the OK button. Default: 'OK'
  • {Boolean} [options.focusOk] Wether the 'OK' button should have the focus or not. Default: true
  • {Boolean} [options.okCloses] Wether the modal should close on 'OK' click or not. Default: true
  • {String} [options.cancelText] Text for the cancel button. Default: 'Cancel'. If passed a falsey value, the button will be removed
  • {Boolean} [options.allowCancel] Whether the modal can be closed, other than - OK. Default: true
  • {Boolean} [options.escape] Whether the 'esc' key can dismiss the modal- true, but false if options.cancellable is true
  • {Boolean} [options.animate] Whether to animate in/out. Default: false
  • {Function} [options.template] Compiled underscore template to override the default one
  • {Object} [options.modalOptions] Options to pass directly to bootstrap-modal
  • {Boolean} [options.enterTriggersOk] Whether the 'enter' key will trigger OK. Default: false[cb])

Renders and opens the modal, running the optional callback if the 'OK' button is pressed


Close the modal and remove it from the DOM


Prevents the modal from closing. Can be called from within a 'ok' or 'cancel' event listener:

var modal = new Backbone.BootstrapModal().open();

modal.on('ok', function() {
  //Do some validation etc.
  if (!isValid) modal.preventClose();

Live demo

You can read a short article and see live demo on sys.exit() blog.

Something went wrong with that request. Please try again.