ModalPane's callback doesn't work

[siovene]

Hi,
I was having trouble with the ModalPane's callback, and I created a minimal app in a jsfiddle:

http://jsfiddle.net/siovene/n29y7/

The callback function is never called on click, but only on keypress if I hit ESC.

Thanks in advance for looking into this.

[bradleypriest]

Yeah, the modal pane has been broken for quite a while with ember 1.0.pre whilst setting a rootElement on the application because it is appending the modal pane outside of the applicationView.
I meant to have posted an issue a while ago.

This is how I've currently hacked it to work in my app. I'll get a test and PR (a different fix though) for it up in the next couple of days, thanks for the minimal app.

Bootstrap.ModalPane.reopen({
  _triggerCallbackAndDestroy: function(options, event){
    this._super(options, event);
    App.router.applicationController.set('modal', null);
  }
});

Bootstrap.ModalPane.reopenClass({
  popup: function(options) {
    var modalPane;
    if (!options) options = {};
    modalPane = this.create(options);
    App.router.applicationController.set('modal', modalPane);
    return modalPane;
  }
});

[bradleypriest]

Here's a better short-term fix:

Bootstrap.ModalPane.reopenClass({
  popup: function(options) {
    var modalPane;
    if (!options) options = {};
    modalPane = this.create(options);
    modalPane.appendTo(App.rootElement);
    return modalPane;
  }
});

[siovene]

I haven't tested the following, but won't appending the backdrop to the root element rather than body break the z-indexing in IE?

[bradleypriest]

@siovene Does PR #37 fix your issue?

[dmathieu]

While there's no news from @siovene, I'm merging #37 anyway.
The modal should anyway be scoped inside the .ember-application.

About the z-index problem in IE, it would be easily fixable in CSS by adding a higher lower z-index to .ember-application. So it doesn't seem to be a real problem.