Using Modal Dialogs

You want to show part of your UI in a modal dialog.

Render a specific controller into a named modal outlet in your application template.

You can use a route's render method to render a specific controller and template into a named outlet. In this case we can setup our application template to handle the main outlet and a modal outlet:

{{outlet}}
{{outlet 'modal'}}

Then you can render a controller and template into the modal outlet. Sending an action in a template will propagate to the application route's actions.

In a template:

<button {{action 'openModal' 'myModal'}}>Open modal</button>

In your application route:

export default Ember.Route.extend({
  actions: {
    openModal: function(modalName) {
      return this.render(modalName, {
        into: 'application',
        outlet: 'modal'
      });
    }
  }
});

When closing a modal, you can use the route's disconnectOutlet method to remove the modal from the DOM.

closeModal: function() {
  return this.disconnectOutlet({
    outlet: 'modal',
    parentView: 'application'
  });
}

It may also be helpful to use a modal-dialog component to handle common markup and interactions such as rendering an overlay and handling clicks outside of the modal.