Ember-Cli Modal Service is an Ember modal dialog 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

You can discover the power and simplicity of this addon here.

The demo shows the addon in action and some ways of using it.

Installation

See the Github repository readme.md here.

Usage

The addon provides a modal-manager component that you should insert inside the application template. But if you want the modal manager to be in another part of your application, you can insert this snippet in another template (like privrate part of an application).

{{!-- app/templates/application.hbs --}}<br />
{{modal-manager}}

To create a modal dialog, extend the modal-instance component. Then create an associated template.

Or use the Ember generator to generate a component and update the parent class to ModalInstance.

// 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 */);
      },
   }
   //...
});

The content of the template should match the content of the tag modal-content from Bootstrap modal.

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

<div class="modal-header">
    <button type="button" class="close" {{action 'rejectMe'}}>×</button>
    <h4 class="modal-title">Modal Example</h4>
</div>
<div class="modal-body">
    <!-- Body of modal -->
</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
    })
}

Api

Modal (Service)

Access

Access the service by injection

modal:Ember.inject.service()

Methods

showModal(modalComponentName, context)

Display a modal component

• modalComponentName : The name of the modal component to be displayed
• context : model or context to be passed to the component. Access it in the component as ‘model’

Returns a promise that is resolved or rejected when the modal is hidden/closed.

ModalInstance (Component)

Access

Extend the imported module

import ModalInstance from ‘ember-cli-modal-service/components/modal-instance'

Methods

closeResolve(result)

Close the modal and resolve the promise with the results given in parameters.

• result: The result to be resolved for the promise returned by the modal service.

closeReject(result)

Close the modal and reject the promise with the results given in parameters.

• result: The result to be rejected for the promise returned by the modal service.

What’s next?

Simply run

$ ember install ember-cli-modal-service

inside your ember-cli project and enjoy or checkout the project’s github page.

Found an issue? Want to give feedback? Will to improve? The project is fully managed on Github. Join in there…

Could it be simpler?