Create a modal dialog in Ember - ember.js

Question

I'm trying to open a modal dialog form in Ember - I have a form that I'd like users to submit a comment to before processing a workflow, but so far I've been unable to find any good documentation on how to open a modal dialog (where to put controllers, routes, models, etc.). I am new to Ember, so please bear with me. Thanks.

Answer 1

I followed Ember Guru's guide called "Master you're modals" on Ember, and they work great!
create template here:
create component called my-modal. Add the following in the components js:
export default Ember.Component.extend({
actions: {
ok: function() {
this.$('.modal').modal('hide');
this.sendAction('ok');
}
},
show: Ember.on('didInsertElement', function() {
Ember.on('hidden.bs.modal', function() {
this.sendAction('close');
}.bind(this), this.$('.modal').modal());
})
});
Add the following code to the components hbs (template):
<div class="modal fade" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-center">{{title}}</h2>
</div>
{{yield}}
<div class="modal-footer">
</div>
</div>
</div>
</div>
Now you need to create a template for the specific use of the modal where you call the component. Call it: waitingModal or loadingModal or whatever you like. In this modal template you call the component like so:
{{#my-modal title='Loading Modal' ok='save' close='removeModal'}}
{{/my-modal}}
Add the following to the application route:
showModal: function(name, model) {
this.render(name, {
into: 'application',
outlet: 'modal',
model: model
});
},
Lastly to call a modal after clicking a button, in the button's action you need to call:
this.send('showModal','loading-modal');
where loading-modal is the specific template you're calling.
and to remove the modal:
this.send('removeModal');
Hope this helps!

Answer 2

You could use an addon or implement the recipe from the cookbook.

Answer 3

I'm using ember-dialog. Just one command ember install ember-dialog and dialogs on aboard. Here is example of use you're looking for:
export default Ember.Controller.extend({
// Injecting dialog service
dialog: Ember.inject.service(),
model: { username: "Something" },
actions: {
showForm: function() {
this.get("dialog").blank("path-to-some-form", this, {
acceptHandler: "save"
});
},
save: function(presenter) {
var isValid = true;
if (isValid) {
// Closing presenter
presenter.accept();
}
}
}
});
Template (/app/templates/path-to-some-form.hbs):
<form {{action "accept" on='submit'}}>
{{!-- contextObject here is controller --}}
{{input value=contextObject.model.username}}
<button class="w-btn w-btn__default" type="submit">Send</button>
<button class="w-btn w-btn__danger" type="button" {{action "decline"}}>Cancel</button>
</form>