akisvolanis/jsbin.qijaro.css

## jsbin.qijaro.css
/* Put your CSS here */
html, body {
    margin: 20px;
}

## jsbin.qijaro.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Master your modals with Ember.js</title>
    <script src="http://code.jquery.com/jquery-2.1.0.js"></script>
    <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
    <script src="http://builds.emberjs.com/tags/v1.5.0/ember.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

    <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>

    <script type="text/x-handlebars">
      <h2>Master your modals with Ember.js</h2>
      {{outlet}}
      {{outlet modal}}
    </script>

    <script type="text/x-handlebars" data-template-name="index">
      <p><strong>Name:</strong> {{name}}</p>
      <button {{action 'showModal' 'settings-modal' model}}>settings</button>
      <button {{action 'showModal' 'logout-modal'}}>logout</button>
    </script>

    <script type="text/x-handlebars" data-template-name="settings-modal">
      {{#my-modal title='Settings' ok='save' close='removeModal'}}
        <form {{action 'ok' on='submit' target=view}}>
          <div class="form-group">
            <label>Name</label>
            {{input class="form-control" value=name}}
          </div>
        </form>
      {{/my-modal}}
    </script>

    <script type="text/x-handlebars" data-template-name="logout-modal">
      {{#my-modal title='Logout' ok='logout' close='removeModal'}}
        Are you sure you want to logout?
      {{/my-modal}}
    </script>

    <script type="text/x-handlebars" data-template-name="components/my-modal">
      <div class="modal fade">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">{{title}}</h4>
            </div>
            <div class="modal-body">
              {{yield}}
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" {{action 'ok'}}>OK</button>
            </div>
          </div>
        </div>
      </div>
    </script>

  </body>
</html>

## jsbin.qijaro.js
App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

/*
 * ApplicationRoute
 */
App.ApplicationRoute = Ember.Route.extend({
  actions: {
    showModal: function(name, content) {
      this.controllerFor(name).set('content', content);
      this.render(name, {
        into: 'application',
        outlet: 'modal'
      });
    },
    removeModal: function() {
      this.disconnectOutlet({
        outlet: 'modal',
        parentView: 'application'
      });
    }
  }
});

/*
 * IndexRoute
 */
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.Object.create({ name: 'My name' });
  }
});

/*
 * SettingsModalController
 */
App.SettingsModalController = Ember.ObjectController.extend({
  actions: {
    save: function() {
      // save to server
    }
  }
});

/*
 * LogoutModalController
 */
App.LogoutModalController = Ember.Controller.extend({
  actions: {
    logout: function() {
      alert('logout');
    }
  }
});

/*
 * MyModalComponent
 */
App.MyModalComponent = Ember.Component.extend({
  actions: {
    ok: function() {
      this.$('.modal').modal('hide');
      this.sendAction('ok');
    }
  },
  show: function() {
    this.$('.modal').modal().on('hidden.bs.modal', function() {
      this.sendAction('close');
    }.bind(this));
  }.on('didInsertElement')
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Master your modals with Ember.js</title>
	<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
	<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
	<script src="http://builds.emberjs.com/tags/v1.5.0/ember.js"></script>
	<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

	<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
	</head>
	<body>

	<script type="text/x-handlebars">
	<h2>Master your modals with Ember.js</h2>
	{{outlet}}
	{{outlet modal}}
	</script>

	<script type="text/x-handlebars" data-template-name="index">
	<p><strong>Name:</strong> {{name}}</p>
	<button {{action 'showModal' 'settings-modal' model}}>settings</button>
	<button {{action 'showModal' 'logout-modal'}}>logout</button>
	</script>

	<script type="text/x-handlebars" data-template-name="settings-modal">
	{{#my-modal title='Settings' ok='save' close='removeModal'}}
	<form {{action 'ok' on='submit' target=view}}>
	<div class="form-group">
	<label>Name</label>
	{{input class="form-control" value=name}}
	</div>
	</form>
	{{/my-modal}}
	</script>

	<script type="text/x-handlebars" data-template-name="logout-modal">
	{{#my-modal title='Logout' ok='logout' close='removeModal'}}
	Are you sure you want to logout?
	{{/my-modal}}
	</script>

	<script type="text/x-handlebars" data-template-name="components/my-modal">
	<div class="modal fade">
	<div class="modal-dialog">
	<div class="modal-content">
	<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	<h4 class="modal-title">{{title}}</h4>
	</div>
	<div class="modal-body">
	{{yield}}
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	<button type="button" class="btn btn-primary" {{action 'ok'}}>OK</button>
	</div>
	</div>
	</div>
	</div>
	</script>

	</body>
	</html>
	App = Ember.Application.create();

	App.Router.map(function() {
	// put your routes here
	});

	/*
	* ApplicationRoute
	*/
	App.ApplicationRoute = Ember.Route.extend({
	actions: {
	showModal: function(name, content) {
	this.controllerFor(name).set('content', content);
	this.render(name, {
	into: 'application',
	outlet: 'modal'
	});
	},
	removeModal: function() {
	this.disconnectOutlet({
	outlet: 'modal',
	parentView: 'application'
	});
	}
	}
	});

	/*
	* IndexRoute
	*/
	App.IndexRoute = Ember.Route.extend({
	model: function() {
	return Ember.Object.create({ name: 'My name' });
	}
	});

	/*
	* SettingsModalController
	*/
	App.SettingsModalController = Ember.ObjectController.extend({
	actions: {
	save: function() {
	// save to server
	}
	}
	});

	/*
	* LogoutModalController
	*/
	App.LogoutModalController = Ember.Controller.extend({
	actions: {
	logout: function() {
	alert('logout');
	}
	}
	});

	/*
	* MyModalComponent
	*/
	App.MyModalComponent = Ember.Component.extend({
	actions: {
	ok: function() {
	this.$('.modal').modal('hide');
	this.sendAction('ok');
	}
	},
	show: function() {
	this.$('.modal').modal().on('hidden.bs.modal', function() {
	this.sendAction('close');
	}.bind(this));
	}.on('didInsertElement')
	});