New Twiddle

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
	actions: {
    pushModal(modalName, modalOpts) {
      this.get('modalManager').push(modalName, modalOpts);
    },
    
    popModal() {
      this.get('modalManager').pop();
    }
  },
  
  modalManager: Ember.inject.service()
});

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  activate() {
    Ember.run.scheduleOnce('afterRender', () => {
	    this.get('input').setActiveInstance(this.get('controller'), 'application root');
    });
  },
  
  input: Ember.inject.service()
});

application.template.hbs

<header>
	Click to open modal →
	<button {{action 'pushModal' 'modal-alpha'}}>alpha</button>
 	<button {{action 'pushModal' 'modal-bravo'}}>bravo</button>
</header>

{{outlet}}
<pre class="log"></pre>

{{#if modalManager.modalName}}
<section class="modal">
  <div class="modal__container">
    {{component modalManager.modalName modalOpts=modalManager.modalOpts close="popModal"}}
  </div>
</section>
{{/if}}

input.service.js

import Ember from 'ember';

export default Ember.Service.extend({
  activeInstance: null,
  activeContext: null,
  
  setActiveInstance(activeInstance) {
    this.setProperties({activeInstance, activeContext: activeInstance.toString()});
    this.get('logger').log(`focus set to ${this.get('activeContext')}`);
  },
  
  logger: Ember.inject.service()
});

logger.service.js

import Ember from 'ember';

export default Ember.Service.extend({
  log(message) {
    Ember.$('.log')[0].innerText += message + '\n';
  }
});

mixins.modal.js

import Ember from 'ember';

export default Ember.Mixin.create({
	didInsertElement() {
    let input = this.get('input');
    
  	this.returnFocusState = input.get('activeInstance');
    // TODO: this probably would be in the modal explicitly, so it can give focus to a specific component
    input.setActiveInstance(this);
    
    this._super();
  },

  willDestroy() {
    this._super();
    this.get('input').setActiveInstance(this.returnFocusState);
  },
  
  input: Ember.inject.service()
});

modal-alpha.component.js

import Ember from 'ember';
import Modal from 'demo-app/mixins/modal';

export default Ember.Component.extend(Modal, {
  classNames: ['modal-alpha'],
  
  actions: {
    close() {
      // actions up...
      this.sendAction('close');
    }
  }
});

modal-alpha.template.hbs

<h2>A-Team</h2>
<img class='a-team' src="http://vignette2.wikia.nocookie.net/a-team/images/4/4c/The-a-team-the-cast-mr-t-george-peppard-dwight-schultz-dirk-bendict.jpg/revision/latest?cb=20140228191543">
<span class="close-modal" {{action 'close'}}>close</span>

modal-bravo.component.js

import Ember from 'ember';
import Modal from 'demo-app/mixins/modal';

export default Ember.Component.extend(/*Modal, */{
  classNames: ['modal-bravo'],
  
  didInsertElement() {
    this.closeCountdown = 5;
    this.closeCountdownTimer = setInterval(this.closeCountdownTick.bind(this), 1000);
  },
  
  willDestroy() {
    clearInterval(this.closeCountdownTimer);    
  },
  
  closeCountdownTick() {
    this.closeCountdown--;
    this.$('.close-modal-countdown').text('closing in ' + this.closeCountdown);
    
    if (this.closeCountdown === 0) {
      this.sendAction('close');
    }
  }
});

modal-bravo.template.hbs

<h2>B-Team</h2>
<img class="b-team" src="http://blacknerdproblems.com/wp-content/uploads/2015/03/Archer2.png">
<span class="close-modal-countdown">closing in 5</span>

modal-manager.service.js

import Ember from 'ember';

export default Ember.Service.extend({
	/**
  *	pushes a modal onto the modal view stack
  *
  * @param {string} modalName - the name of the component to show as a modal
  * @param {object} [modalOpts] - property options to pass to the modal
  */
  push(modalName, modalOpts) {
    let activeModal = this.get('activeModal');

    if (activeModal && activeModal.modalName === modalName) {
      this.get('logger').log(`pushModal: rejected because ${modalName} is already active`);
      return;
    }      

    this.get('logger').log(`pushModal(${modalName})`);

    this.get('modalViewStack').pushObject({modalName, modalOpts});
  },

  /**
  * pops the active modal off of the view stack
  */
  pop() {
    this.get('logger').log(`popModal: ${this.get('activeModal').modalName}`);
    this.get('modalViewStack').popObject();
  },
  
  /**
  * open modals are stored in a view stack, so that the proper order can
  * be maintained when a modal closes and others are still open
  */
  modalViewStack: [],
  
  /**
  * The object representing the currently displayed modal. When a modal
  * is open, this will have the properties: modalName, modalOpts.
  */
  activeModal: Ember.computed.alias('modalViewStack.lastObject'),
  
  /**
  * The name of the component currently being shown as a modal.
  */
  modalName: Ember.computed('activeModal', function () {
    let modal = this.get('activeModal');
    return modal ? modal.modalName : null;
  }),
  
  /**
  * The options assoicated with the current modal.
  */
  modalOpts: Ember.computed('activeModal', function () {
    let modal = this.get('activeModal');
    return modal ? modal.modalOpts : null;
  }),
  
  logger: Ember.inject.service()
});

styles.app.css

body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-size: 17px;
  background-color: rgb(64, 64, 196);
  color: #fff;
}

header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 0 8px;
  height: 40px;
}

header > button {
  margin: 0 3px;
  color: #fff;
  font-size: 17px;
  font-weight: 200;
  padding: 2px 6px 3px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.4);
  outline: none;
}

header > button:hover {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 255, 255, 0.5);
}

header > button:active {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(0, 255, 255, 0.6);
  padding: 3px 6px 2px;
}

h2 {
  margin: 0 0 5px;
  font-weight: 300;
}

.modal {
  position: absolute;
  top: 40px;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.35) 100%);
}

.modal__container {
  position: relative;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 12px;
  box-shadow: 0 0 15px 3px rgba(0,0,0,0.35);
  background-color: rgb(64, 64, 196);
}

.modal-alpha > .a-team {
  width: 320px;
  height: 216.75px;
}

.modal-bravo > .b-team {
  width: 350px;
  height: 196.5px;
}

.close-modal, .close-modal-countdown {
  position: absolute;
	top: 12px;
  right: 12px;
  cursor: default;
}

.close-modal:hover {
  text-decoration: underline;
}

.log {
  font-size: 14px;
  padding: 5px 12px;
}

twiddle.json

{
  "version": "0.4.17",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "release",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
    "ember-template-compiler": "release"
  }
}