Backbone.BootstrapModal
- Takes care of instantiation and opening/closing modals
- Manages multiple modals
- Adds several options
- Removes the element from the DOM when closed
##Usage
var view = new Backbone.View({...});
var modal = new Backbone.BootstrapModal({ content: view }).open();
##Events
###cancel The user dismissed the modal (e.g. pressed cancel or Esc etc.)
###ok The user clicked OK
###shown Fired when the modal has finished animating in
###hidden 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");
modal.preventClose();
}
});
var view = new MyView();
var modal = new Backbone.BootstrapModal({ content: view }).open();
##Methods
###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
###modal.open([cb]) Renders and opens the modal, running the optional callback if the 'OK' button is pressed
###modal.close() Close the modal and remove it from the DOM
###modal.preventClose() 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.