awkward/backbone.modal

A plugin for Backbone.js that simplifies creating modals for your application.

backbone.modal's Issues

Publish library to bower

The library is great but many users use bower for their dependency management so it would be greatly appreciated if this library was published to bower so that we could just run a command in bower to install the dependency like

bower install backbone-modal

Safari bugs on the site

e.g. the close button

Remove margins outside the content from the modals

How to add a Backbone View in the Modal ?

Hi guys, first thing first thanks for sharing your work.

I'm sorry to bother, but i'm struggling with the integration of your pluggin into my project.
I'd like to use Backbone.modal accross my project.
In one hand i have a couple of standard Backbone.view defined.
In the other hand i have your pluggin.

I'd like to use modal with backbone views loaded into the viewContainer attributes.

Sample :
// this is Backbone.modal
// Create a modal view class
var Modal = Backbone.Modal.extend({
template: _.template(modalTemplate),
cancelEl: '.bbm-button',
viewContainer : '.modal_content'
});
// this is my view
var msgFormView = new MessageFormView({
model : this.model,
status : 'new'});

var modalView = new Modal({
// title : "Write your message",
views : {
// i'd like to pass my view as a param but it's not rendering...
view : newMsg
// the modal is popin, but it's empty...
}
}
});

How can I achieve this ?

One more time thanks for your help.

Regards.

Form is not visible on a tablet (mobile) device

All seems to work fine on my laptop (Chrome/Firefox/Safari) but when I try the same page using Safari on an iPad I get a completely blurred page and the modal form is not visible anywhere.

I cannot figure out how to control the positioning of the modal form using the library.

I managed to do it using jquery model forms as follows:
position: {my: "center top", at: "center top", of: window}

`but, I can see no way to impose the same sort of control here. Other than that it was looking good.

Am I missing something, or is there something wrong with the positioning logic?

Add support for Zepto and jQuery

I was trying to use Backbone.Modal and I kept getting an error telling me the object had no method fadeIn. Then I realized it was because I am using Zepto (with fallback to jQuery on IE). Zepto doesn't support fadeIn or fadeOut.

I'm proposing the fadeIn and fadeOut methods are replaced with show and hide which are supported by both libraries. Then you animate the opacity instead of using a fade effect with the display property. I've submitted a pull request where I simply replaced fadeIn and fadeOut with show and hide and the nice animations seem to still work fine. All tests are passing.

So where it was previously this:

@modalEl.css(opacity: 0)
@$el.fadeIn
  duration: 100
  complete: =>
    @modalEl.css(opacity: 1).addClass("#{@prefix}-modal--open")

It is now simply this:

@modalEl.css(opacity: 0)
@$el.show()
@modalEl.css(opacity: 1).addClass "" + @prefix + "-modal--open"

I didn't add a duration or a success callback because the animations were working fine for me. But if necessary, animate will allow a duration and a success callback for both libraries which could be used to animate the effect.

How to access modal's properties from views?

I would like to be able to call openAt and other methods of the modal from views. Is that possible?

Adjust font size line numbers

Cannot pass data to _.template in template field.

When I try to use underscore templates with some data, doesn't work completely.

Not work

var Modal = Backbone.Modal.extend({
        template: _.template(boxTemplate, {
        title: "Login",
        formTitle: "formTitle",
        email: "email",
        password: "password",
        rememberMe: "remember me",
        signIn: "Sign in",
        login: "login",
        cancel: "cancel"
      }),
        viewContainer: this.$el,
        submitEl: '.done',
        cancelEl: '.cancel'
      });
      var modal = new Modal();
      $('#div').html(modal.render().el);

The HTML isn't rendered completely. Only the first div of the template is rendered.

Work

var Modal = Backbone.Modal.extend({
        template: _.template(boxTemplate),
        viewContainer: this.$el,
        submitEl: '.done',
        cancelEl: '.cancel'
      });
      var modal = new Modal();
      $('#div').html(modal.render().el);

My original file:

define([
  'jquery',
  'underscore',
  'backbone-pkg',
  'text!templates/loginbox/box.html'
], function($, _, Backbone, boxTemplate) {
  return Backbone.View.extend({
    initialize: function(options) {
      this.el = options.el;
      this.lang = options.lang;
      this.render();
    },
    render: function() {
      var Modal = Backbone.Modal.extend({
        template: _.template(boxTemplate, this.defaultLang[this.lang]),
        viewContainer: this.$el,
        submitEl: '.done',
        cancelEl: '.cancel'
      });
      var modal = new Modal();
      $('#menu').remove();
      $('#loginBox').html(modal.render().el);
    },
    defaultLang: {
      es: {
        title: "Login",
        formTitle: "formTitle",
        email: "email",
        password: "password",
        rememberMe: "remember me",
        signIn: "Sign in",
        login: "login",
        cancel: "cancel"
      },
      en: {
        title: "Login",
        formTitle: "formTitle",
        email: "email",
        password: "password",
        rememberMe: "remember me",
        signIn: "Sign in",
        login: "login",
        cancel: "cancel"
      }
    }
  });
});

Update docs with submit and close behavior

It's not pretty clear which methods are absolutely necessary. Close is something from Marionette, but is also used for Backbone.Modal, which is currently missing from the docs.

iPad Safari: tapping anywhere in the modal closes it

Every time I tap on the modal, regardless of the element I'm tapping on, the modal would close. If I tap on an input, the iOS keyboard would show up briefly before the modal closes. I've traced this down to clickOutside, where the event target ends up as the modal wrapper, and thus triggerCancel is called.

iOS 8.1.3 and up is affected.

Problem with Backbone 1.1.1 and AMD loading

Hello,
for some strange reason backbone.modal doesn't work with latest Backbone 1.1.1 "Backbone is not defined."

Thanks

Make backbone.modal available as a npm package

We are using backbone.modal in a browserify-built project. It would be really handy if we could add it to our package.json as an npm module. Currently, we are referencing it via a git url, but we need to use npm shrinkwrap on our project and the git url does not play nicely with shrinkwrap.

Add segment.io / google analytics

Make modals responsive

regionType to regionClass

When using it for Marionette, the code is working but in the http://awkward.github.io/backbone.modal/, it is still indicated that regionType is to be used, which may be confusing to others.

Scrolling wrapper

Hi!

I think the bbm-wrapper whould be better with position: fixed; rather than position: absolute; in backbone.modal.css.

With "absolute" as a value, the user can scroll beyond the wrapper's end.

Thx

Refresh (re-render) step view

I'm looking for that and I don't find it, it is implemented in anyway? It'd be an awesome feature!

what is the <tester> element for?

I was wondering why you create an element with minus text-indent.

Update documentation regarding Marionette Regions and Layouts

The docs refer to the older version of Marionette with the older references and so someone who is not fully aware of Marionette would follow the examples to have it not work at all.

The references in question are:

var Layout = Backbone.Marionette.Layout.extend({
  template: _.template($('#template').html()),
  regions: {
    modals: {
      selector:   '.your-modals-container',
      regionType: Backbone.Marionette.Modals
    }
  }
});

It should be changed to:

var Layout = Backbone.Marionette.LayoutView.extend({
  template: _.template($('#template').html()),
  regions: {
    modals: {
      selector:   '.your-modals-container',
      regionClass: Backbone.Marionette.Modals
    }
  }
});

With "Layout" becoming "LayoutView" and "regionType" becoming "regionClass"

conflict with Bootstrap navbar fixed top zIndex

have to change this if using Twitter Bootstrap Navbar Fixed Top

z-index: 100; to z-index: 1031;

Add comments to stylesheet

Tester takes place in the flow

My modal have some custom styling to make it fixed and centered in the viewport:

  .bbm-wrapper {
    display: table;
    width: 100%;
    height: 100%;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;

    text-align: center;
  }

    .bbm-modal {
      display: table-cell;
      vertical-align: middle;
    }

It works great, however, the element you create gets a relative position and this make it takes spaces in the flow with my styling (in Firefox & IE at least, doesn’t seems to happen in Chrome).

I’ve made some tests and using an absolute position seems to fix the problem without breaking anything apparently.

Would it be possible for you to use an absolute positioning on the element? You probably have more examples to test with to be sure it still works in any case.

Thanks!

Possibility to not listening keyup events.

I want to disable default Enter/Escape events by configurable arguments.

Something wanted way:

var Modal = Backbone.Modal.extend({
    enterCode: null, // or possible change keyCode to custom value
    escapeCode: null
});

Create bundled version

Any call to modal.destroy() throws a jQuery addClass error

It seems that when using Marionette and Backbone.modal, any call to modal.destroy() whether from the modalsContainer (i.e App.modalsContainer.destroy()) or from within the view (i.e. this.destroy) uses a reference to this.modalEl instead of this.$el.

This causes an undefined reference in a jQuery addClass statement to fail with:

Uncaught TypeError: Cannot read property 'addClass' of undefined

inside the Modal.prototype.destroy function, particularly with this line:

this.modalEl.addClass("" + this.prefix + "-modal--destroy");

I currently just run this in the onDestroy() event handler in the view to get around it but this should be fixed:

this.modalEl = this.$el 

template attribute can not be a string like in Marionette.

In the example it uses template: _.template()

var Modal1 = Backbone.Modal.extend({
        template: _.template($('#modal-template1').html()),

It is not possible to refer to a string instead of a method:

    var Modal1 = Backbone.Modal.extend({
        template: "#modal-template1",

http://marionettejs.com/docs/marionette.view.html

Looking at the backbone.modal code we see that it calls this.modalEl.html(this.template(data)); and fails if template is a string.

   Modal.prototype.render = function(options) {
       var data, _ref;
        data = this.serializeData();
          if (!options || _.isEmpty(options)) {
            options = 0;
          }
          this.$el.addClass("" + this.prefix + "-wrapper");
          this.modalEl = Backbone.$('<div />').addClass("" + this.prefix + "-modal");
          if (this.template) {
                  this.modalEl.html(this.template(data));
          }

In Marionette they use something like:

var templateFunc;
    if (typeof template === 'function') {
     templateFunc = template;
    } else {
      templateFunc = Marionette.TemplateCache.get(template);
    }

See https://github.com/marionettejs/backbone.marionette/blob/9bdb9e61e149512bed829c9e8c839470df992978/src/renderer.js

I will try to make it work in a fork and submit a PR.

enable user to set explicit width

Using enter key instead of mouse click causes modal to open & immediately close

When I use the keyboard to trigger a click instead of a mouse, the modal window opens and then immediately closes. This happens in your examples and in my local build.

Here is an animated gif of first using the mouse and then a few keypresses:

How to manage ui element like Marionette

How do I manage the ui element like Marionette ItemView

tester element doesn't get cleaned up on .destroy()

Possible to keep modal from closing on submit?

I have all inline validation being run in the beforeSubmit function and it's working wonderfully. if it passes the submit function is called and the modal closes. In this particular instance I'd like to keep the modal open while I wait for a response back from the server. In the event that the response is an error, I need to keep the modal open so the user can fix the issue. This is my submit function:

submit: function () {
    this.trigger("placeorder:save");
    return false;
}

… and my placeorder:save function:

modal.on("placeorder:save", function () {
    modal.model.save({}, {
        success: function (model, response, options) {
            CRM.navigate("orders/" + response.returnData.Order_OrderID, {trigger: true});
        },
        error: function(model, response) {
            console.log(response);
        },
    });
});

I thought the return: false; in the submit function would keep the modal from closing, but it still closes. Suggestions?

Avoid of using Marionette from global scope

It is strage that Marionette referenced directly In backbone.marionette.modals extension whereas there is a right call to it: Backbone.Marionette.
I am using the AMD version of Marionette where it doesn't put itself to the window object so I get an error:

Uncaught ReferenceError: Marionette is not defined 

Please fix this, it is really fast :)

RequireJs setup

Problem setting up with requirejs using backbone.modal.js. An help would be appreciate

How can you pass model data to tab view ?

Animation on retina

Doesn't work smooth :-(

Keys in textarea element closes modal

When you add textarea to your modal, and will try to type something in it, and desire to add new line by pressing enter. Your modal closes. As it listens $('body').on('keyup') event. Suppose keys in textarea must be ignored.

Preventing enter from closing modal

Is there a way to prevent the hooking of the enter key to close the modal? Looking at the source of checkKey then calling triggerSubmit which will try its hardest to close the modal. Not all modals will need to be submitted or dismissed in that manner...

The reason I ask is because I had an issue where I was clicking a link to show a modal, then pressing enter on the keyboard caused the modal to freak out, appearing and reappearing a few times before disappearing completely. I solved this by adjusting the focus when the modal popped up, but it was hard to diagnose.

But now I have another related issue with this enter keypress hook: a login form that I am submitting by Ajax. I want to keep the modal there whilst it waits for "success", to ensure that username and password were entered correctly. If I use clicks it's fine, because they're not being intercepted. But if I press enter in any of the text fields, BB Modal goes "Hey, I'll be helpful and close that for you!" - and then the result comes back, and if it's failure, the user gets stuck in a dismissed modal limbo.

I guess I don't understand why anyone would always want an enter keypress to dismiss a modal, without some way to disable this behaviour... So what would be the best way to stop this keypress behaviour, short of hacking the source, which would make future upgrades difficult?

$(':focus').blur() fails

Here https://github.com/awkward/backbone.modal/blob/master/backbone.modal.js#L57
in $(':focus').blur() $ is undefined.
Maybe it should be Backbone. $(':focus').blur()

click-drag element in modal outside the modal region and release click causes modal to close

It seems you trigger the close of modal on mouseup on dark overlay, wheras I should have to click down and up on the dark part to have it close. This is particularly troublesome for a dialog I have with sliders at the very edges of the dialog.

Add example, docs about views: [] and the types you can add

That you can use view: ... a template, function (that returns either a template or instance of a Backbone.View) or a Backbone.View class as a property.

Change copy / text spacing in modals on the site

clickOutside should be an option that can be disabled

It would be nice to be able to create a modal and pass clickOutside: false to disable the click outside event from closing the modal.

Support for Dust.js templates?

Dust is async so you have the run the following function to render the template:

dust.render('my-template', data, function (err, output) {
    return self.$el.html(output);
});

Is there a way to get this working with dust?

Update backbone.modal-bundled.js with changes from backbone.modal.js for latest Marionette

Hey guys.

Your new backbone.marionette.modals.js contains the latest changes to make it compatible with the latest marionette version. (the ensureEl() to _ensureElement() change) but the backbone.modal-bundled.js file doesn't contain these changes so running

grunt build

may be necessary to update the concatenated file.

Just a heads up.

lacking documentation on the use of model and alternate templates

My best guess is that I could do
template: Handlebars.compile(myTemplate)

and then initialize the modal with
new MyModal(model: thisModel )

but that doesn't seem to work. Should it ?

Firefox bugs on site

Please add it to bower

Can you guys add it to the bower listings?

Passing arguments to a View

Is there support for passing arguments to a Backbone.View in a Backbone.Modal? Looking at the code it's not obvious whether or not I can, for example, pass a collection to a view in a multi-view modal configuration.

For example, I'd like to be able to pass a Backbone.Collection to the #step2 view

        views: {
            'click #step1': { view: AddBuildingTemplate },
            'click #step2': { view: TaskBatchAddView }
        },

Ability to provide arguments in constructor

I'm trying to create a layer up to Backbone.Modal so I can use a Base Modal object whenever I require a new modal.

This doesn't work. Is there any way to achieve this?

var Modal = Backbone.Modal.extend({
    template: _.template('<h1>Modal Title</h1><div class="my-container"></div>'),
    viewContainer: '.my-container'
});

var modalView = new Modal({
    views: {
      'click .whatever': {
        view: _.template('<h2>View</h2>')
      }
    }
});

or even better

var Modal = Backbone.Modal.extend({
    cancelEl: '.cancel-button'
});

var modalView = new Modal({
  template: _.template('<div>Modal HTML</div>')
});