Using Modal Dialogs Edit Page

Problem

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

Solution

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

Discussion

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:

1
2

{{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:

1

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

In your application route:

1
2
3
4
5
6
7
8
9
10

App.ApplicationRoute = 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.

1
2
3
4
5
6

  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.

Example

This example shows:

1. Rendering a pop-up modal in a named outlet.
2. Sending a specific model to the modal controller.
3. Wrapping the common modal markup and actions in a component.
4. Handling events to close the modal when the overlay is clicked.

JS Bin