A clean pattern for modal dialogs

Recently, I was working on a project which had a number of different modals. I discovered a really clean pattern for implementing modals via actions and ember-modal-dialog.

We implemented each of the different modals as separate components, and rendered ember-modal-dialog in the application template the following way:

{{#if isModalVisible}}
  {{#modal-dialog}}
    {{component modalDialogName modalContext=modalContext closeAction="closeModal"}}
  {{/modal-dialog}}
{{/if}}

The component helper allows us to dynamically choose which modal we’d like to see. We call the modal via the following action in the application route;

const { setProperties, set } = Ember;

actions: {
  showModal(modalDialogName, modalContext) {
    const applicationController = this.controller;

    setProperties(applicationController, {
      modalDialogName,
      modalContext,
      isModalVisible: true
    });
  },

  closeModal() {
    const applicationController = this.controller;

    set(applicationController, 'isModalVisible', false);
  }
}

We invoke the modal via a normal action call:

<button {{action "showModal" "my-component-name" contextForModal}}>Show the modal!</button>

The modalContext could be as simple as a string, or as complex as an Ember-Data model. It gets passed to the component as the modalContext attribute, so you’ll need to remember to retrieve your properties from within there if you are trying to do something a bit more complex.

The component helper is really what enables this pattern, otherwise you’d need to either have a series of ifs to display the correct modal. I may extract this pattern into a separate addon, as I see it as one I’ll reuse frequently whenever we have multiple modal dialogs.