powmedia / backbone.bootstrap-modal

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.

backbone.bootstrap-modal's Issues

on Hide/Hidden event missing when clicked outside the modal

When allowCancel === true - modal can be closed by clicking outside of its boundaries. The View as far as I can tell doesn't react to this event via hidden.

After testing: cancel, close, ok and click outside - I determined that all actions trigger hidden.bs.modal. First 3 events also trigger hidden in the BootstrapModal, but not the click outside of the modal.

I had to implement a workaround and instead of using this.bind('hidden', callback), I'm using:

$(document).on('hidden.bs.modal', '.modal', {view: this}, callback);

It would be nice if hidden event would cover the click outside of modal boundaries as well.

Close button

how can add close button top right side.

Swap out modal views dynamically

This works great and saved us a ton of time. Is there a way to replace the existing view inside the modal with another one dynamically? I have a backend process that takes a while to publish the content and would like to show a spinner gif in the modal while the content is being fetched. Once the content is available, I would like to swap out the spinner view with the actual content. I couldn't find a way to set the content at run time though.

Improve readme

It should probably pointed out in the readme that you cannot bind on the shown and hidden event directly on the modal but one must use modal.$el instead:

Does not work

modal.on('shown', function() {
  // some code
});

Works

modal.$el.on('shown', function() {
  // some code
});

Remove dependency on the default bootstrap modal JS file

Impossible to disable Esc key functionality

Right now it's not possible to disable the use of the Esc key to close the modal.

Both "options.escape" and "options.modalOptions.keyboard" are ignored.
In fact, the code shows that "options.escape" it not used at all throughout the code.

pass model when using a custom template?

can you get to model attributes when using a custom template?

i keep getting errors like this when trying:

Uncaught ReferenceError: lastName is not defined
(anonymous function)
c underscore-min.js:30
Backbone.View.extend.render backbone.bootstrap-modal.js:126
Backbone.View.extend.open backbone.bootstrap-modal.js:149
Backbone.View.extend.searchResultAction app.js:263
f.event.dispatch jquery-1.7.2.min.js:3
h.handle.i jquery-1.7.2.min.js:3

is there anything obviously wrong with the below code?

var tmpl = _.template($("#employee-details-template").html());
var mdl = new Backbone.Model({ firstName: 'cooooooole', lastName: 'oooooorton' });
var view = new Backbone.View({ model : mdl });
var modal = new Backbone.BootstrapModal({ content: view, template: tmpl , animate: true }).open();

thanks in advance, cole

Closing bootstrap alerts inside a modal closes the modal.

The close event on the modal listens for a click on the close class ('.close'). The problem is that Bootstrap uses this class for several elements in addition to the modal (e.g. dismissible alerts). Therefore if someone, for example, has an alert within a modal, two close classes will be present and the modal will be closed when the close button on the alert is clicked.

This can be easily fixed by eliminating the ambiguity of which close class belongs to the modal. One solution would be to add another class to the modal close button, such as 'modal-close'. We could then change the trigger event to be on '.modal-close' instead of just '.close'.

Events in the view

The example in the readme about events in the view doesn't seem to work, as the alert never shows:

var view = new Backbone.View({
    initialize: function () {
        this.bind("ok", okClicked);
    },

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

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

This is the related code in backbone.bootstrap-modal.js:

'click .ok': function(event) {
  event.preventDefault();
  this.trigger('ok');

  if (this.options.content && this.options.content.trigger) {
    console.log("Content:", this.options.content);
    console.log("Modal  :", this);
    this.options.content.trigger('ok', this);
  }

  if (this.options.okCloses) {
    this.close();
  }
}

I'm rather new to Backbone so I don't fully get what's happening with the context when this.options.content.trigger('ok', this) is called.

If someone could explain this to me and nudge me in the right direction to get the above example working, that would be great!

Thanks!

[Feature Request] Enter to submit

When enter is pressed I think "ok" is a resonable default.

I added the following to the events:

  'keypress': function(event) {
     if (event.which == 13) {
       event.preventDefault();
       this.trigger('ok');
         if (this.options.content && this.options.content.trigger) {
           this.options.content.trigger('ok', this);
         }

         if (this.options.okCloses) {
           this.close();
         }
       }
    }

The above does only seem to work with forms/inputs though...
Perhaps it's something you'd want to add to the offical version?

/Stefan

Visual bugs when displaying 2 modals

When a second modal is created over another, the background does not cover the first modal.

The top of the second modal is also set to the top of the first modal, no matter what the height.

Bootstrap modal "shown" event not working when "animate" property is set to "false"

If I set animate: true, then shown event is working just fine.

Issue demo: http://jsfiddle.net/nzLSA/40/

'hidden' event is not caught

in my environment, MacOX, Chrome, following potion of code of 'backone-bootstrap-modal.js' is not working as expected, the code handling 'hidden' event is not executed

close: function() {
            var self = this,
                $el = this.$el;

            //Check if the modal should stay open
            if (this._preventClose) {
                this._preventClose = false;
                return;
            }
            $el.modal('hide');

            $el.one('hidden', function() {
                self.remove();

                self.trigger('hidden');
            });

the reason is that the event bind is called after "modal('hide')" or to say the event bind is execute after the event had happened, i temporally worked around it by switch the order like following

           $el.one('hidden', function() {
                self.remove();

                self.trigger('hidden');
            });

            $el.modal('hide'); 

i dont know if orignal code works on other environment , i think it would be good to bind the event at the initialization, like in the open or render method

Allow the option to focus a text input

Currently there is only an option to focus on buttonOk. It would be nice to have the option to focus an arbitrary field by class.

view = new Backbone.BootstrapModal({ content: $('.formclass').html(), focus: 'field_class' }).open();

Please publish 0.9.1 with Bootstrap 3 support into Bower

$ bower info backbone.bootstrap-modal
bower backbone.bootstrap-modal#*       not-cached git://github.com/powmedia/backbone.bootstrap-modal.git#*
bower backbone.bootstrap-modal#*          resolve git://github.com/powmedia/backbone.bootstrap-modal.git#*
bower backbone.bootstrap-modal#*         download https://github.com/powmedia/backbone.bootstrap-modal/archive/v0.9.0.tar.gz
bower backbone.bootstrap-modal#*          extract archive.tar.gz
bower backbone.bootstrap-modal#*         resolved git://github.com/powmedia/backbone.bootstrap-modal.git#0.9.0

{
  name: 'backbone.bootstrap-modal',
  homepage: 'https://github.com/powmedia/backbone.bootstrap-modal',
  version: '0.9.0'
}

Available versions:
  - 0.9.0

Version 0.9.1 with support for Bootstrap 3 modal markup is not yet available on Bower.

Any advice on using with r.js optimizer?

Hi, thanks for this tool it's a great help in integrating backbone and bootstrap. I've used this in a couple of spot's and I'm attempting to ready my app for deployment. To do this I'm using the r.js optimizer (part of require). I've used a shim set up to pully the libraries my app uses together and as part of that I point the optimizer to my shim file as my mainConfigFile option and I set the wrapShim flag to tru so that backbone's dependancies get loaded.
However this then results in backbone.bootstrap-modal declaring that '_' is undefined as the scop has been changed by the wrap.
Is there a suggested way of resolving this so I can use this library in an optimized environment?

How to NOT display the Cancel and OK buttons?

I love this little library! It got me start using modals with Backbone quick and easy. I want to use it so that users can do a search in my DB, click one of the results, and return that result to the main screen to edit it.

I already have a little cross to close the modal on the right top (<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>), and because of this, I don't need the Cancel and OK button.

Does anybody know how I can somehow prevent it from displaying the cancel and ok button? All tips are welcome!

Close() should be called for all ways of closing the modal

Clicking the background, or pressing Esc to close the modal does not run the close() method. This should run so modals are properly removed from the DOM, events are fired etc.

How do I NOT display the Ok button?

I've tried with this inside the view passed on to the modal and it looks like the button has not loaded yet when render gets called. Howerver the same works when an event (like click) is fired from the modal for example -> that proves the button is accessible.

render: function() {
      $(this.el).html(template);
      $('.ok').hide();
      return this;
    },

Version?

Great extension. Could you add version number so we can track the changes in our list of dependencies?

Multiple modals with different width

Your plugin has proved to be great help. Thanks.

Can I know, if I have three modals with different width how can I handle it? Is there anything which is configurable?

Its not an issue, actually. I may be hitting wrong place, please let me know if this is true.
Regards,

An example on how to use it would be nice

For people with little Backbone experience.

Thanks.

Template not working...

var modal = new Backbone.BootstrapModal({
    title      : "My first modal",
    content    : "This is my content",
    animate    : true,
    focusOk    : false,
    okCloses   : true,
    allowCancel: true
});

modal.open();

Result:
http://awesomescreenshot.com/0b74774fdf

Pressing esc closes all open modals instead of the topmost one

be sure to use last jquery 1.9 version for multiple modals fonctionnality

be sure to use last jquery 1.9 version for multiple modals fonctionnality

return data

Great job with this plugin, worked out of the box but now I'm having trouble figuring out how to get data from the content on Ok click, for example lets say I have an input field and write something in it, how do I get that data out when I click ok?

Thanks in advance

License

What's the license for the code?

shown event not working

I hope this is user error, but I am unable to get the shown event working. I have tried several combinations.

modal = new Backbone.BootstrapModal({ content: view, title: title, animate: true }).open();

                        modal.bind("shown", function(){
                            alert("hello");
                        });

Is this a possible conflict with bootstrap?

Negative z-index issue with multiple modals (and possible solution)

Thanks for the great module, Charles!

Preamble
I'm trying to implement dialogs as a way to interact with forms, display alerts, progress and confirmation messages.

So, in my case, a form submission sequence would look like this:

1. User opens modal with a form.
2. User submits the form.
3. Modal with form closes.
4. Progress modal being displayed (new alert modal)
5. On submission confirmation progress modal is closed.
6. Confirmation modal being displayed (new alert modal)

While it seems like too many steps and modals, it works quite well and unobtrusive, IMHO.

The issue

When I submit the form many times in a row to get a few cycles of the sequence, at some point I end up with a modal that has negative z-index. I stepped through your code with a debugger to see what was going on, but couldn't really pin-point where the negative count was starting. Its like close() method was ran multiple times on the same modal, but I couldn't see it. One thing I noticed, is that Modal.count++ happens after an on.cancel event setter on line 222. So, I moved Modal.count++ higher in the code right below modal creation $el.modal(..) on line 171 and it fixed my problem.

I'd appreciate if you could look into this whenever you have a chance.

Thanks again!

Scroll to top of bootstrap modal.

Hiya,

Love this bit of script, would it be possible to add an option to allow a window to scroll to the content if it is currently not visible. Like in the link below;

http://stackoverflow.com/questions/17180621/jquery-scroll-to-top-of-bootstrap-modal

Sometimes when the top of the page is scrolled down a long way the modal is shown but isn't visible and the user has an awkward user journey to scroll to the content.

Thanks,

Rick.

RequireJS/AMD question

https://github.com/powmedia/backbone.bootstrap-modal/blob/bootstrap3/src/backbone.bootstrap-modal.js#L272

Wouldn't this:

return Modal;

be better and more AMD / RequireJS compliant than what we have?

Backbone.BootstrapModal = Modal;

Adjusting width of the modal dialog

I suggest adding an option that will append a class to the modal-dialog div. This allows us to set custom width or styling if necessary to override the default behavior.

preventClose() does not work properly with 'cancel' event

Check the following case at http://jsfiddle.net/LvmBP/

The modal is closed because the modal triggers 'cancel' before modal.preventClose() changes the flag _preventClose to prevent close window.

Make content views aware of modals

First off, thanks for this project. I had a rather hackish way of doing bootstrap modals with my backbone-forms but this is much more elegant.

In my case it would be useful to make the views aware of their modal My views have functions that save/validate them and it makes more sense to me to have things like:

modal.on('ok', () function{
if (! @noteFormView.submit()) {
modal.preventClose();
}
}

in the model instead of outside. This is particularly obvious when using a bunch of views that inherit from the same base class (and the bass class manages the saving). It would be much more DRY - to me - to handle the 'ok' click in the base model rather than outside of the views all together.

Closing topmost stacked modal causes body to lose "modal-open" class

This might be a trouble if the intermediate modal is high enough so that it needs scrolling. Body will scroll in this case.