zurb reveal

component.hbs

<div id="{{modalId}}" class="reveal-modal small" data-reveal aria-hidden="true" role="dialog">
  {{yield}}
</div>

component.js

import Ember from 'ember';

export default Ember.Component.extend({
  toggleDialog: function() {
    if (this.get('display') === true) {
      this.send('showModal');
    }
    else {
      this.send('closeModal');
    }
  }.observes('display'),

  modalId: function() {
    return Ember.guidFor(this + 'modal');
  }.property(),

  actions: {
    showModal: function() {
      let modalId = '#' + this.get('modalId');
      this.$(modalId).foundation('reveal', 'open');
    },
    closeModal: function() {
      let modalId = '#' + this.get('modalId');
      Ember.$(modalId).foundation('reveal', 'close');
    }
  }
});