Ember-cli-modal-service

An Ember modal service packaged as an Ember-Addon. It allows to simply implement Bootstrap modal dialog and open them through a service call that returns a promise.

Demo

Visit demo

Installation

Run either command below depending on Ember version in your project folder.

For Ember CLI >= 0.2.3:

ember install ember-cli-modal-service

For Ember CLI < 0.2.3:

ember install:addon ember-cli-modal-service

This addon requires Ember.js (>2.x)

The addon depends on Bootstrap (>3.x) but doesn't install it as a Bower dependency. You should add "bootstrap": "~3" to your bower.json before or after installation and the run bower install

Usage

This addon provides a modal-manager component that you should insert in a near hierarchy top template.

{{!-- app/templates/application.hbs --}}

...
{{modal-manager}}
...

To create a modal dialog, extend the modal-instance component and create an associated template as it's the content of the tag modal-content from Bootstrap modal.

// app/components/modal-example.js

import Ember from 'ember';
import layout from '../templates/components/modal-example';
import ModalInstance from 'ember-cli-modal-service/components/modal-instance';

export default ModalInstance.extend({
  layout: layout,

  ...

  actions:{
    resolveMe:function(){
        this.closeResolve(/* some resolved results */);
    },
    rejectMe:function(){
        this.closeReject(/* some rejected results */);
    },

    ...
  }
});

{{!-- app/templates/components/modal-example.hbs --}}

<div class="modal-header">
    <button type="button" class="close" {{action 'rejectMe'}}>&times;</button>
    <h4 class="modal-title">Modal Example</h4>
</div>
<div class="modal-body">
    ...
</div>
<div class="modal-footer">
    <div class="row">
        <div class="col-sm-12">
            <button class="btn btn-success" {{action 'resolveMe'}}>
                Resolve
            </button>
            <button class="btn btn-danger" {{action 'rejectMe'}}>
                Reject
            </button>
        </div>
    </div>
</div>

To display the modal, call the showModal from the modal service

modal:Ember.inject.service(),

displayExampleModal:function(){
    var modalModel = this.getModalModel();

    this.get('modal').showModal('modal-example', modalModel).then(function(results){
        //modal resolved
    }).catch(function(results){
        //modal rejected
    })
}