Ember-bootstrap-modal

Installation

• npm install --save-dev ember-bootstrap-modal
• ember g ember-bootstrap-modal

###Example implementation

####templates/application.hbs

It's recommended to use ember-wormhole in conjunction in order for the bootstrap modal HTML markup not to interfere with your layout.

<div class="container">
    {{outlet}}

    <div id="destination">

      <!-- ember-wormhole -->

    </div>

</div>

####templates/test.hbs

<div class="row">
    <div class="col-md-12">
        <button type="submit" type="button" class="btn btn-large btn-primary" {{action "toggleShow"}}>Show</button>

        {{#ember-wormhole to="destination"}}
          {{test-modal isVisible=showMyModal}}
        {{/ember-wormhole}}

    </div>
</div>

####controllers/test.js

import Ember from 'ember';

export default Ember.Controller.extend({
    showMyModal: false,
    actions: {
        toggleShow() {
            this.set('showMyModal', !this.get('showMyModal'));
        }
    }
});

####templates/components/test-modal.hbs

{{#bootstrap-modal isVisible=isVisible title="Your Custom Bootstrap Modal"}}
    {{input type="text" class="form-control"}}
{{/bootstrap-modal}}

####components/test-modal.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    doSave(d, meta) {
      //d.reject();
      d.resolve();
    },
    doAfterClose() {
      //
    },
    doClose(d) {
      if(confirm('Please confirm...')) {
        d.resolve();
      } else {
        d.reject();
      }
    }
  }
});

####router.js

this.route('test');