Really simple ember modal implementation

component.modal-dialog.js

import Ember from 'ember';

export default Ember.Component.extend({
	modal: undefined,

	show: false,

	setupModal: function() {
		var modal = this.$('.modal').modal({
			show: this.get('show'),
			backdrop: false
		});

		this.$('.modal-backdrop').click(function() {
			modal.modal('hide');
		});

		modal.on('hide.bs.modal', function() {
			var show = this.get('show');

			if (show === false) {
				return true;
			}

			this.sendAction('hide');
			return false;
		}.bind(this));

		modal.on('hidden.bs.modal', function() {
			this.sendAction('hidden');
		}.bind(this));

		this.set('modal', modal);
	}.on('didInsertElement'),

	onVisibilityChanged: function() {
		var dialog = this.get('modal'),
			show = this.get('show');

		if (show === true) {
			dialog.modal('show');
		} else {
			dialog.modal('hide');
		}
	}.observes('show')
});

components.modal-dialog.hbs

<div class="modal fade">
	<div class="modal-backdrop fade in"></div>
	<div class="modal-dialog">
		<div class="modal-content">
			{{yield}}
		</div>
	</div>
</div>

example.hbs

{{#modal-dialog show=showModal hide="hideModal" hidden="modalHidden"}}
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h4 class="modal-title">I'm a modal!</h4>
		</div>
		<div class="modal-body">
		 <p>Such body, very modal. Wow!</p>
		</div>
		<div class="modal-footer">
			<button type="submit" class="btn btn-success">Woof!</button>
		</div>
	</form>
{{/modal-dialog}}

mixins.modal.js

import Ember from 'ember';

export default Ember.Mixin.create({
	showModal: true,

	resetDialog: function() {
		this.setProperties({
			'showModal': true
		});
	},

	actions: {
		hideModal: function() {
			this.set('showModal', false);
		},
		showModal: function() {
			this.set('showModal', true);
		}
	}
});