Integrating ember-modal-dialog inside a site header Ember 2.0

I'm very new to the Ember framework and I have a question regarding getting a modal setup. I have the site-header as a component. When I click a login button I'd like for a modal to popup. I found the Ember Modal Dialog plugin and was able to set it up so that there is a modal always shown in application.hbs. However, I'm having trouble understanding a couple of things but first here are my files.

application.hbs

{{site-header}}
{{outlet}}
{{#if isShowingModal}}
  {{#modal-dialog close="toggleModal"
                  alignment="center"
                  translucentOverlay=true}}
    Oh hai there!
  {{/modal-dialog}}
{{/if}}
{{site-footer}}

site-header.js

import Ember from 'ember';

export default Ember.Component.extend({
  isShowingModal: false,
  actions: {
    toggleModal: function() {
      this.toggleProperty('isShowingModal');
    }
  }
});

So, I have this code for the button in my site-header.hbs:

<li class="login-button"><button class="btn btn-block btn-danger" {{action 'toggleModal'}}>Login</button></li>

As I understand it, action is saying to find toggleModal property in the site-header.js and execute the function above which does the property toggling.

1. However, how does application.hbs "see" the value of isShowingModal? Can it even see that value since the modal isn't showing up?

2. When most developers have modals, do they all go inside application.hbs since you want them to appear in the middle of the screen {{outlet}} area? How can you improve the process for including multiple modals?

3. What changes should I make to make the modal show up when the user clicks a button in the header?