modal-test

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  modalService : Ember.inject.service(),
  inModal:Ember.computed.alias('modalService.inModal')
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none'
});

Router.map(function() {
  this.route('first-route', function () {
      this.route('child-route');
  });
  this.route('second-route');
});

export default Router;

routes.abstract-route.js

import Ember from 'ember';

export default Ember.Route.extend({
  modalService : Ember.inject.service(),
  
  beforeModel(transition){
    console.log('....');
    this._super(...arguments);
    this.set('params', transition.queryParams);
  },
  
  renderTemplate(){
    let params= this.get('params');
    if(params.inmodal){
      console.log(this.get('routeName'));
      this.set('modalService.inModal', true);
      let path = this.get('routeName').replace('.', '/');
      this.render(path,{ outlet: 'appmodal' });
    }else{
      this.render();
    }
  }
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  modalService : Ember.inject.service(),
  
  actions:{
    close(){
      this.set('modalService.inModal', false);
      this.transitionTo('index');
    }
  }
});

routes.first-route.child-route.js

import Ember from 'ember';
import AbstractRoute from '../abstract-route'

export default AbstractRoute.extend({
  model(){
    console.log('here im haha');
  }
});

routes.first-route.js

import Ember from 'ember';
import AbstractRoute from './abstract-route'

export default AbstractRoute.extend({
});

routes.second-route.js

import Ember from 'ember';
import AbstractRoute from './abstract-route'

export default AbstractRoute.extend({
});

services.modal-service.js

import Ember from 'ember';

export default Ember.Service.extend({
  inModal: false
});

styles.app.css

.notOpen {
 	display: none; 
}

.modalDialog {
    display: block;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.modalDialog > div {
    width: 300px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    background: #fff;
}
.close:hover {
    background: #00d9ff;
}

templates.application.hbs

{{link-to 'FIRST' 'first-route'}} | {{link-to 'SECOND' 'second-route'}} | {{link-to 'CHILD' 'first-route.child-route'}}
|
{{link-to 'FIRST in Modal' 'first-route' (query-params inmodal='true')}} | {{link-to 'SECOND in Modal' 'second-route' (query-params inmodal='true')}} | {{link-to 'CHILD in Modal' 'first-route.child-route' (query-params inmodal='true')}}

<hr>
Not: Aynı route'u tekrar tıklasak (modalda veya değil) çalışmaz...
<br>
<br>
{{outlet}}
<br>
<br>

{{#if inModal}}
  <div class='modalDialog'>
  		<div>
    		{{outlet 'appmodal'}}
      </div>
      <button class='close' {{action 'close'}}>Close Me</button>
  </div>
{{/if}}

templates.first-route.child-route.hbs

<h3>This is my child route</h3>
{{outlet}}

templates.first-route.hbs

<h2>This is my first route</h2>
{{outlet}}

templates.second-route.hbs

<h2>This is my second route</h2>
{{outlet}}

twiddle.json

{
  "version": "0.8.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1"
  }
}