An example of a Bootstrap 3 modal in Ember.js stemming from the example at http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/

application_route.js

App.ApplicationRoute = Ember.Route.extend({
  actions: {
    /*
      modalName : The name of a template to render, e.g. 'foo.signinForm'
      model     : A string or object with the value of a model that will be used to create a new record from the store
    */
    openModal: function(modalName, model) {

      var model       = this.store.createRecord(model),
          controller  = this.controllerFor(modalName);

      controller.set('model', model);

      return this.render(modalName, {
        into: 'application',
        outlet: 'modal'
      })
    },

    closeModal: function() {
      return this.disconnectOutlet({
        outlet: 'modal',
        parentView: 'application'
      });
    }
  }
})

new_post_controller.js

App.NewPostFormController = Ember.Controller.extend({
  needs: ['posts'],
  posts: Ember.computed.alias('controllers.posts'),
  isVisible: false,
  view: null,

  hideModal: function(view, controller) {
    view.$().on('hidden.bs.modal', function() {
      controller.toggleProperty('isVisible');
      
      // Tell the ApplicationRoute to close the modal
      controller.send('closeModal');
    })
    .modal('hide');
  },

  actions: {
    dismiss: function(view) {
      this.hideModal(view, this);
    },

    saveNewPost: function() {
      // Init vars
      var controller = this;
      var textBody = this.get('textBody');

      // create new record
      var post = this.store.createRecord('post', {
        textBody : textBody,
      });

      // save record
      post.save().then(function(result) {
        // Handle save...
        var posts   = controller.get('posts'),
            view    = controller.get('view');

        // Hide modal
        controller.hideModal(view, controller);

        // Add reply to store
        posts.pushObject(result);

      }, function(result) {
        // Handle failure...
        console.log('fail!');

      });
    }
  }
});

new_post_form.handlebars

{{! Notice that inside Handlebars you will have access to the `view`. Make sure to be a good collaborator and pass it up to the controller :) }}

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" {{action 'dismiss' view}} aria-hidden="true">&times;</button>
      <h6 class="modal-title" id="myModalLabel">New Post</h6>
    </div>

    <div class="modal-body">
      <form role="form">
        {{textarea value=textBody class="form-control" rows=10}}
      </form>
    </div>

    <div class="modal-footer padding-10">
      <button type="button" class="btn btn-sm btn-danger pull-left remove-border-radius" {{action 'save'}}>Reply</button>
      <button type="button" class="btn btn-sm btn-default remove-border-radius" {{action 'dismiss' view}} >Close</button>
    </div>
  </div>
</div>

new_post_view.js

App.NewPostFormView = Ember.View.extend({
  templateName: 'new_post_form',
  
  // Can make tagName `form` for more sematic HTML. This way you can also have Ember handle the on="submit" event...
  tagName: 'div',
  classNames: ['modal', 'fade'],

  didInsertElement: function() {
    var self       = this,
        controller = this.get('controller')

    // Give the controller a handle on the view
    controller.set('view', self);

    self.$().on('shown.bs.modal', function() {
      controller.toggleProperty('isVisible');
    })
    .modal('show');
  },

  willDestroyElement: function() {
    this
      .off('shown.bs.modal')
      .off('hidden.bs.modal');
  }
});