Integrate Bootstrap modal?

[mrkongo]

How to use the Bootstrap modals with this amazing addon? Anyone before me with this problem?

[stfcodes]

@mrkongo as a first attempt I've had some success including the bootstrap modal html, but without the parent div.modal in the template like so:

{{#modal-dialog targetAttachment='center' translucentOverlay=true}}
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title'>Modal title</h5>
        <button {{action 'toggleModal'}} type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body'>
        <p>Modal body text goes here.</p>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-primary'>Save</button>
      </div>
    </div>
  </div>
{{/modal-dialog}}

A minor css change is also necessary. I've added a modals.scss file with the following:

@import "ember-modal-dialog/ember-modal-structure";

.ember-modal-overlay.translucent {
  background-color: rgba(#808080, .77);
}

I'm pretty sure there might be more css changes needed, but for the moment this seems good enough.