ember modal dialog liquid fire

I am new to ember. Have use liquid fire to slide between pages. But would like to add a transition to my ember modal.

I'd like fade in - like this - http://ift.tt/1QnTARE (see bottom of the page).

My code: app/templates/components/hello-modal.hbs:

<div> !</div>
<div></div>
<button  class="done">Thanks</button>
<button  class="change">Change</button>

app/components/hello-modal.js:

export default Ember.Component.extend({
  classNames: ['hello-modal'],
  actions: {
    gotIt: function() {
      this.sendAction('dismiss');
    },
    change: function() {
      this.sendAction('changeSalutation');
    }
  }
});

step 3 ( as you can see from the example in link says): 'Call modal() within your router map, at whichever scope you choose and wire up any actions:'

Not sure I understand this. But I added it to my cupcakes router:

router.js

Router.map(function() {

            this.route('device');
            this.route('cupcakes', function() {
              this.modal('hello-modal', {
                withParams: ['salutation', 'person'],
                otherParams: {
                  modalMessage: "message"
                },
                actions: {
                  changeSalutation: "changeSalutation"
                }
              });        

    });

cupcakes.hbs

    Try It

controllers/cupcakes.js:

export default Ember.Controller.extend({
  queryParams: ['salutation', 'person'],
  salutation: null,
  person: null,
  modalMessage: "bound text for modal",
});

Nothing happens when I click 'try it' on cupcakes.hbs And no error messages show in the console.