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 '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.

javascript 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.