Ember Modal Component test. The component takes a 'title' property and generates a button. When you click the button, it creates a dynamic child view appended to the body yielding whatever content was passed into the component block.

example.hbs

{{#modal-popup title="Edit Pic"}}
  <!-- this goes inside the modal -->
  <div class='pic'>
    <div class="form">
      {{input value=pic.url}}
    </div>
  </div>
{{/modal-popup}}

modal-popup.coffee

ModalPopupComponent = Em.Component.extend
  showModal: ->
    @createChildView(Em.View,
      classNames:   ['modal-popup-container']
      controller:   @_parentView.get('controller')
      context:      @_parentView.get('context')
      template:     @get('template')
      templateData: { keywords: @_parentView.cloneKeywords() }
      popupHide:    -> @remove()
      isModal:      true
    ).append()

export default ModalPopupComponent

modal-popup.hbs

{{#if isModal}}

  <div class="modal-popup">
    {{yield}}
  </div>

{{else}}

  <button {{action showModal}}>{{title}}</button>

{{/if}}