• Stars
    star
    183
  • Rank 203,436 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 12 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Bootstrap Modal wrapper for use with Backbone.

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.

More Repositories

1

backbone-forms

Form framework for BackboneJS with nested forms, editable lists and validation
JavaScript
2,170
star
2

backbone-deep-model

Improved support for models with nested attributes.
JavaScript
648
star
3

buildify

Builder for creating distributable JavaScript files from source. Concatenate, wrap, uglify.
JavaScript
123
star
4

mongoose-fixtures

Fixture loader for NodeJS' Mongoose ODM. Check pow-mongodb-fixtures instead to load data straight to MongoDB, skipping Mongoose.
JavaScript
112
star
5

pow-mongodb-fixtures

Easy JSON fixture loading for MongoDB. Makes managing relationships easier.
JavaScript
108
star
6

mongoose-taggable

Simple tagging plugin for Mongoose
JavaScript
23
star
7

nodeunit-httpclient

HTTP response testing for NodeUnit
JavaScript
16
star
8

mongoose-plugins

Plugins for NodeJS' Mongoose ODM: Slugger, Timestamper, Authenticator, Pointer (DBRefs), Validators
JavaScript
15
star
9

backbone.xview

Easy to use view manager for Backbone. Effortless nested views and templating.
JavaScript
10
star
10

pow-underscore

Underscore with mixins and path support
JavaScript
7
star
11

pow-mongoose-plugins

Plugins for Mongoose (NodeJS MongoDB ORM)
JavaScript
6
star
12

mocker

NodeJS mocking library
JavaScript
3
star
13

backbone.screenmanager

Manage mobile Backbone views with menus, overlays and transitions
JavaScript
3
star
14

pow-express-utils

Express utils
JavaScript
3
star
15

powActivatablePlugin

Symfony 1.4 plugin: Adds the Activatable Doctrine behavior which is useful for when you want to hide or 'switch off' certain records. For example, for moderation, approval etc. This adds an is_active column (can be renamed) and helper methods to the Table model class for modifying queries.
PHP
3
star
16

powJSONActions

A simple Symfony 1.4 plugin to make responding to JSON requests and debugging easier.
PHP
2
star
17

update-props

Updates a whitelist of an object's properties and returns changes, if any
JavaScript
1
star
18

heroku-utils

Utilities for apps running on Heroku
JavaScript
1
star
19

pow-mongoose-timestamps

Add created and updated timestamps to Mongoose models
JavaScript
1
star
20

react-stripe-checkout

Load stripe's checkout.js as a react component. Easiest way to use checkout with React.
JavaScript
1
star